word-break と overflow-wrap の違い

# はじめに

今回は文章を折り返す 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 と overflow-warp との違い

word-break と overflow-wrap はどちらも文章の折り返しを制御するための css プロパティですがどのような違いがあるのでしょうか？ ( `overflow-wrap` については「[文章の折り返しをしてくれる overflow-wrap について](https://qiita.com/yamataikoku2001/items/0246d44556192957c27a)」で説明をしているので、そちらを参照していただけると嬉しいです！)

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

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

## `word-break: break-all`

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

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZYzWxpb" data-pen-title="Differenct between break-word and overflow-wrap : break-word" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/ZYzWxpb">
Differenct between break-word and overflow-wrap : break-word</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

## `overflow-wrap: anywhere`

次に `overflow-wrap: anywhere` です。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NPKNYRm" data-pen-title="Differenct between word-break and overflow-wrap : overflow-wrap" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/NPKNYRm">
Differenct between word-break and overflow-wrap : overflow-wrap</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`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` を指定するのが良いのではないかと思いました。

# 参考文献

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

https://ics.media/entry/240411/