はじめに

今回は文章を折り返す css プロパティである word-break と overflow-wrap の違いについてまとめてみたいと思います。

word-break について

テキストの改行ルールそのものを変更するプロパティです。

以下の4つを値として指定することができます。

normal (初期値)
- ブラウザの既定の改行規則を用います。
keep-all
- CJK (中国語、台湾語、日本語、韓国語) テキストが改行されなくなります。CJK 以外 (英語とか) は normal と同じ挙動となります。
break-all
- CJK 以外も改行されなくなります
break-word
- overflow-wrap でどのような値を指定していたとしても、その値をうわがいて、overflow-wrap: anywhere を word-break: normal と同じ動きになります。これは非推奨となっているので、使わないようにしましょう。

違いを一言で表すと、単語の扱い方です。

以下では word-break: break-all と overflow-wrap: anywhere を用いて、比較をしてみます。

p タグに word-break: break-all を指定しています。

この中で最も長い単語は一番最初に出てくる Antidisestablishmentarianism (どうでもいいですが反国教会廃止主義という意味らいしいです) という言葉です。この単語は親要素の 200px を超えてしまいますので、改行されています。

しかし、他の単語も見てみると 200px を超えないような単語 ( discussed など)も改行されてしまっているのがわかると思います。

これが word-break の特徴です。たとえ次の行に送れば改行を防ぐことができたとしても、送ってくれず、そのまま改行されてしまいます。

次に overflow-wrap: anywhere です。

Antidisestablishmentarianism は 200px を超えてしまっているので、word-break 同様に改行されています。

しかし、他の単語はどうでしょうか？

200px を超える単語は無いので、単語の途中で改行されている箇所はありません。

最初の方の discussed のところを比較するとわかりやすいかなと思いますが、discussed は単語の途中で改行されずに次の行に送られています。

このように、両者には単語の扱い方に違いがあることがわかると思います。

どちらもコンテンツ幅を超えるか超えないかを基準にしていることは同じですが、

overflow-wrap は単語の途中で改行することを最小限に抑えようとしている一方で、 word-break は単語の途中でどんどん改行することを許容しています。

結局、word-break と overflow-wrap をどのように使えば良いのかという話ですが、overflow-wrap: anywhere を指定するのが良いのではないかと個人的には思います。

これは word-break は初期値が normal なので、normal を指定した方が良いという意味でもあります。

もちろんこれはケースバイケースによると思いますし、word-break で normal 以外の指定をすることによる注意点 (今回のような英語が途中で改行されまくって意味が分かりにくくなるなど) を理解しているということが重要になると思います。

それを踏まえた上で、より汎用的に指定してあげたいというときは overflow-wrap: anywhere と word-break: normal を指定するのが良いのではないかと思いました。