【css】長いテキスト時の改行処理の使い分け

URLのように長いテキストが入ってくる時に改行をするために
word-breakや最近だとoverflow-wrapを使う事が推奨されるが、挙動が異なったので備忘録。

コンテナのサイズが決まっている時

コンテナのサイズがpxなど明確に決まっている場合は、overflow-wrapで改行が可能。

overflow-wrap: break-word;

コンテナのサイズが決まっていない場合

display:grid;でgrid-template-columns: repeat(2, 1fr);などと記述している場合はword-breakで改行処理が必要。

word-break: break-all;

まとめ

display:grid;やdisplay:flex;など横並びをした際に子要素に幅（width）の指定がある場合なら、overflow-wrapで改行可能。子要素に幅の指定が無い場合はword-breakで改行。