サイトアイコン LUCKLOG

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

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

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

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

スポンサーリンク

検証結果

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

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

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

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

とは言うものの、非推奨ではありますが、今は2つとも設定しておくのが無難かと思います。注意点として「overflow-wrap: anywhere;」は「word-break: break-word;」の後ろに書きましょう。「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タグだけに付ければ良いので楽ですね。

まとめ

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

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

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

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

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

スポンサーリンク