【CSS】半角英数がはみ出ないようにする方法（word-break、overflow-wrap、word-wrap、line-break）

サイトを作っているとなぜかデザインが崩れている場合があります…

調べてみると、URLなど半角英数字が長すぎて要素からはみ出ていることが原因だったりします。この問題を解決するために「cssで改行させる」方法があるんですが、何種類かあって、いつも悩みます。

ということで、「どれを指定すると、どのような状態になるか？」をまとめておきたいと思います。

スポンサーリンク

検証結果

Chrome最新、Firefox最新、Edge最新で検証しました。すべて同じ結果でした。

問題なかったプロパティと値

一通り検証して問題がなかったのは次の2つです。

• overflow-wrap: anywhere;
• word-break: break-word;

ただ、「word-break: break-word;」は非推奨なので今後無くなるかもしれません。よって、「overflow-wrap: anywhere;」を使えば良いかと思います。

とは言うものの、非推奨ではありますが、今は２つとも設定しておくのが無難かと思います。注意点として「overflow-wrap: anywhere;」は「word-break: break-word;」の後ろに書きましょう。「word-break」と「overflow-wrap」は競合するみたいなので「overflow-wrap」を優先させるためです。

書き方の例

pや tdなどは変更して使ってください。

p, td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

下記に実際に検証した結果を載せておきます。気になる方はご覧ください。

検証結果一覧

検証結果を表にまとめました。検証の詳細に関しては表の下に続けて載せていますので、興味のある方はご覧ください。

スポンサーリンク

検証文字列

下記が検証用の文字列です。各文字列は pタグで囲っています。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaabbbbbcccccdddddeeeeefffffggggghhhhhiiiiijjjjjkkkkklllllmmmmmnnnnnooooopppppqqqqqrrrrrssssstttttuuuuuvvvvvwwwwwwxxxxxyyyyyzzzzz

You can set the line break rule with css. However, there are several methods, so it is necessary to find out which one is better. I would like to summarize it here so that I do not have to look it up in the future.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

テーブルタグ（td)

下記検証用の文字列はtableタグを使っています。各文字列は tdタグで囲っています。（※tableの場合うまくいかない場合があるため、pタグに加えてtdタグも検証します）

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaabbbbbcccccdddddeeeeefffffggggghhhhhiiiiijjjjjkkkkklllllmmmmmnnnnnooooopppppqqqqqrrrrrssssstttttuuuuuvvvvvwwwwwwxxxxxyyyyyzzzzz

You can set the line break rule with css. However, there are several methods, so it is necessary to find out which one is better. I would like to summarize it here so that I do not have to look it up in the future.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

では、検証していきます。

NG：指定なし（normal)

一続きの英字や記号が改行されず、突き抜けてしまう。普通の文章は単語単位でうまく改行されている。

NG：word-break: break-all;

pタグ、tdタグに「word-break: break-all;」を設定しています。

記号以外は上手くいきました。ただし、単語の途中でも改行されてしまう。例えば、「out」が「ou」で改行される。

OK：word-break: break-word;（※非推奨）

pタグ、tdタグに「word-break: break-word;」を設定しています。

すべて上手くいきました。単語の途中ではなく単語ごと改行される。

（参考）tdタグではなく、tableタグにcssを設定しても良い

tableタグに「word-break: break-word;」を設定しても、tdタグに設定したときと同じ結果になるので、tdタグではなく親のtableタグに「word-break: break-word;」を設定してもOKです。

style属性を使ってタグに直接指定する必要がある場合は、各tdタグではなくtableタグだけに付ければ良いので楽ですね。

NG：overflow-wrap: break-word;

※「word-wrap: ～;」が競合するみたいです

pタグ、tdタグに「overflow-wrap: break-word;」を設定しています。

pタグの方は上手くいきましたが、tdタグの方はNGでした。

OK：overflow-wrap: anywhere;

※「word-wrap: ～;」が競合するみたいです

pタグ、tdタグに「overflow-wrap: anywhere;」を設定しています。

すべて上手くいきました。単語の途中ではなく単語ごと改行される。

（注意点）tableタグにcssを設定しても効かない

tableタグに「overflow-wrap: anywhere;」を設定しても、tdタグに設定したときと同じ結果にはなりません。tdに対して設定すれば良いのであまり問題ではありませんが、ご注意ください。

NG：word-wrap: break-word;

pタグ、tdタグに「word-wrap: break-word;」を設定しています。

pタグの方は上手くいきましたが、tdタグの方はNGでした。

NG：line-break: anywhere;

pタグ、tdタグに「line-break: anywhere;」を設定しています。

すべて上手くいきました。ただし、単語の途中でも改行されてしまう。例えば、「out」が「ou」で改行される。

（参考）tdタグではなく、tableタグにcssを設定しても良い

tableタグに「line-break: anywhere;」を設定しても、tdタグに設定したときと同じ結果になるので、tdタグではなく親のtableタグに「line-break: anywhere;」を設定してもOKです。

style属性を使ってタグに直接指定する必要がある場合は、各tdタグではなくtableタグだけに付ければ良いので楽ですね。

まとめ

いろいろなパターンを検証しましたが、「何を妥協するか」によって、使用するプロパティを使い分けても良いかもしれないですね。

ただ、1つの最適解としては下記になるのかなと思います。（※pや tdなどは変更して使ってください）

p, td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

一応主要なブラウザはチェックしましたが、何かおかしな点があったり、他に検証した方が良いプロパティや値があればコメントいただけると嬉しいです。

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク