文章の折り返しをしてくれる overflow-wrap について

# はじめに

今回は文章を折り返すためのCSSプロパティの一つである `overflow-wrap` について書きたいと思います！

# 文章の折り返しに関わるプロパティ

テキストの表示や折り返しにに関わる CSS プロパティはどのようなものがあるでしょうか？

私は正直この記事を書く前、1つも頭に浮かばないぐらいでしたが調べてみるとこんなにもあるんだなあと新発見でした。

- `overflow-wrap`
- `word-break`
- `line-break`
- `hyphens`
- `white-space`

などなど

今回は `overflow-wrap` について触れますが、また他の記事で他のプロパティや `overflow-wrap` との比較もできたらなと思います！

# overflow-wrap について

インライン要素 (aタグなど) に対して、テキストが行ボックス (テキストの各行を包むボックスのこと) を溢れないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうか設定することができます。

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

- `normal` (初期値)
    - 単語の間など、改行可能な位置で改行します
- `break-word`
    - 行内に分割可能な位置がない場合、任意の場所で分割されます
- `anywhere`
    - 行内に分割可能な位置がない場合、任意の場所で分割されます。`break-word` と異なるのは**コンテンツの最小固有寸法を計算する時**に、折り返しが考慮されることです。( `break-word` は折り返されない。)

この「**コンテンツの最小固有寸法を計算する時に折り返しが考慮されるされない**」の部分がよくわからないので、もう少し詳しく見ていきたいと思います。

## `normal` の場合

以下のように、2つとも URL がはみ出していることがわかります。

`normal` は初期値なので、a タグには何もスタイルを当てていない状態です。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dPbMNzm" data-pen-title="overflow-wrap normal" 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/dPbMNzm">
overflow-wrap normal</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>

## `break-word` の場合

以下のように、flexbox 配下にいる URL だけがはみ出していることがわかります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bNbpgvb" data-pen-title="Untitled" 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/bNbpgvb">
Untitled</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>

## `anywhere` の場合

以下のように、`break-word` とは違い、flexbox 配下にいる URL もはみ出していないことがわかります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MYgyJVj" data-pen-title="Untitled" 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/MYgyJVj">
Untitled</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>

## なぜこのようなことが起きるのか？

ここで**コンテンツの最小固有寸法を計算する時に折り返しが考慮されるされない**の話が出てきます

flexbox の2つ目の item である a タグには width が指定されていません。そのため、親要素の 300px から flexbox の1つ目の item の 150px を引いた、150px が 2つ目の item の最小固有寸法として適用されることになります。

このように**コンテンツの最小固有寸法を計算するとき**というのは `width` が指定されておらず、内部的に計算された最小のコンテンツ幅が適用されたときと言えるのではないかと思います。

このとき、`anywhere` は内部的に計算された最小のコンテンツ幅を考慮してくれるため、折り返しができるようになるということです。

## `word-wrap` について

`word-wrap` というのを聞いたことがあるかと思いますが、これは `overflow-wrap` という名前に改名される前のプロパティ名です。互換性のために、`word-wrap` は残っています。

そのため、`overflow-wrap` を使った方が良いかと思います。

# まとめ

結局、`break-word` と `anywhere` をどちらを使うべきなのかという話ですが、基本的に `anywhere` を使っておくのが良いのではないかと思いました。`anywhere` は幅を決めておこうが、決めていなかろうが動作としては変わらないため、`anywhere` を使っておくほうが気にすることが減るかなと思いました。

# 参考文献

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

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

https://www.igmocho.com/css-word-wrapping-guide/