はじめに
CSS で文字列を改行させる方法は複数あります。備忘録も兼ねて、
- 連続した日本語
- 連続した半角英数
- 連続した記号
それぞれどのような挙動をするのかをまとめました。
word-break: break-word;
See the Pen break-word by shiraishi yuma (@punkshiraishi) on CodePen.
- 日本語は単語の途中でも改行される
- 英語と連続した記号は単語の途中では改行されない。ただし、親要素の幅を超える長さの単語は途中で改行される。
- 現在 非推奨 となっている
word-break: break-all;
See the Pen Untitled by shiraishi yuma (@punkshiraishi) on CodePen.
- 日本語は単語の途中でも改行される
- 英語は単語の途中で改行されてしまう
- 連続した記号ははみ出す
overflow-wrap: normal;
See the Pen overflow-wrap: normal; by shiraishi yuma (@punkshiraishi) on CodePen.
- 日本語はデフォルトでこのスタイルが適用されている
- 連続した英語と記号ははみ出す
overflow-wrap: anywhere;
See the Pen overflow-wrap: anywhere; by shiraishi yuma (@punkshiraishi) on CodePen.
- 日本語は単語の途中でも改行される
- 英語と連続した記号は単語の途中では改行されない。ただし、親要素の幅を超える長さの単語は途中で改行される。
-
safari は非対応※
※@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;
See the Pen overflow-wrap: break-word; by shiraishi yuma (@punkshiraishi) on CodePen.
- 日本語は単語の途中でも改行される
- 英語と連続した記号は単語の途中では改行されない。ただし、親要素の幅を超える長さの単語は途中で改行される。
まとめ
注意すべきは、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 コンテナの中ではうまく機能しないことがあります。
下記の記事にまとめましたのでこちらも併せてご覧ください。