はじめに

今回は文章を折り返すための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 タグには何もスタイルを当てていない状態です。

See the Pen overflow-wrap normal by yamataikoku0114 (@yamataikoku0114) on CodePen.

`break-word` の場合

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

See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.

`anywhere` の場合

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

See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.

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

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

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 を使っておくほうが気にすることが減るかなと思いました。

参考文献