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

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

調べてみると、URLなど半角英数字が長すぎて要素からはみ出ていることが原因だったりします。

この問題を解決するために「cssで改行させる」方法があるんですが、何種類かあって悩みます。

ということで今回、関係あるcssのプロパティは「どれを指定すると、どのような状態になるか?」をまとめておきたいと思います。

検証結果

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

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

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

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

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

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

書き方の例

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

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

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

結果一覧

プロパティ 結果 備考
指定なし normal NG
ひと続きの半角英数字がはみ出る
ひと続きの記号がはみ出る
word-break break-all NG
ひと続きの記号がはみ出る
単語の途中でも改行される
break-word OK 非推奨
tableタグに指定しても良い
overflow-wrap break-word NG
table>tdタグの方が上手くいかない
※normalと同じ結果になる
anywhere OK tableタグに指定しても効かない
※tdタグに指定する必要がある
word-wrap break-word NG
table>tdタグの方が上手くいかない
※normalと同じ結果になる
line-break anywhere NG
単語の途中でも改行される
※↑でも良いならOK
tableタグに指定しても良い

検証文字列

こちらは文字列を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タグだけに付ければ良いので楽ですね。

まとめ

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

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