【CSS】文字列を改行させるプロパティの挙動比較

# はじめに
CSS で文字列を改行させる方法は複数あります。備忘録も兼ねて、

- 連続した日本語
- 連続した半角英数
- 連続した記号
 
それぞれどのような挙動をするのかをまとめました。

#  word-break: break-word;
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="zYWggop" data-user="punkshiraishi" 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/punkshiraishi/pen/zYWggop">
  break-word</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 日本語は単語の途中でも改行される
- 英語と連続した記号は単語の途中では改行されない。ただし、親要素の幅を超える長さの単語は途中で改行される。
- [現在 **非推奨** となっている](https://developer.mozilla.org/ja/docs/Web/CSS/word-break#%E5%80%A4)

#  word-break: break-all;
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="GRxVVoa" data-user="punkshiraishi" 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/punkshiraishi/pen/GRxVVoa">
  Untitled</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 日本語は単語の途中でも改行される
- 英語は単語の途中で改行されてしまう
- **連続した記号ははみ出す**

# overflow-wrap: normal;
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGvXXWE" data-user="punkshiraishi" 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/punkshiraishi/pen/bGvXXWE">
  overflow-wrap: normal;</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 日本語はデフォルトでこのスタイルが適用されている
- 連続した英語と記号ははみ出す

# overflow-wrap: anywhere;
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdxNNmZ" data-user="punkshiraishi" 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/punkshiraishi/pen/mdxNNmZ">
  overflow-wrap: anywhere;</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 日本語は単語の途中でも改行される
- 英語と連続した記号は単語の途中では改行されない。ただし、親要素の幅を超える長さの単語は途中で改行される。
- [~~safari は非対応~~](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7) ※

※@kangetsu121 さんから、最新の macOS、iOS では動作するという旨をコメントしていただきました。ありがとうございました。（2022/09/02）

>私もつい先日 overflow-wrap を使うことがあったので気づいたのですが、overflow-wrap: anywhere; は少なくとも最新の Safari (macOS, iOS) では機能するようです。
> まだトリアージ中のようですが、MDN の issue で 2022/7/16 に報告されていました。
https://github.com/mdn/browser-compat-data/issues/17012

# overflow-wrap: break-word;
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="wvmVVpM" data-user="punkshiraishi" 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/punkshiraishi/pen/wvmVVpM">
  overflow-wrap: break-word;</a> by shiraishi yuma (<a href="https://codepen.io/punkshiraishi">@punkshiraishi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 日本語は単語の途中でも改行される
- 英語と連続した記号は単語の途中では改行されない。ただし、親要素の幅を超える長さの単語は途中で改行される。

# まとめ
注意すべきは、`break-all` は **break-all ではないことです。**
**連続した記号を改行してくれません。** 

連続した記号を改行するのは下記のプロパティ/値です。

- `word-break: break-word;` → 非推奨
- `overflow-wrap: anywhere;` → ~~safari 非対応~~
- `overflow-wrap: break-word;`

特に制限事項のない **`overflow-wrap: anywhere;` または `overflow-wrap: break-word;` を使うのが良さそう**です。

# flex コンテナで `overflow-wrap: break-word;` を使う場合
`overflow-wrap: break-word;` は flex コンテナの中ではうまく機能しないことがあります。
下記の記事にまとめましたのでこちらも併せてご覧ください。

https://qiita.com/punkshiraishi/items/98f97d5db2f102026fb0