ウェブサイトのテキストの折り返し（改行）をどのように指定するか。なかなか悩ましい問題です。
これまでCSSで文字の折り返しを設定するには、様々なプロパティを組み合わせて使用する必要がありましたが、最近のCSSの進化により overflow-wrap:anywhere; を使うだけでほぼ全てのケースに対応できるようになりました。

body {
	overflow-wrap: anywhere;
}

この記事では、overflow-wrap:anywhere; がなぜ有効なのか、他のプロパティとどのように異なるのか、具体的な使用例を交えながら解説します。

従来の文字の折り返しとCSSの進化

ウェブページで文字が画面外にはみ出してしまったり、レイアウトが崩れてしまう問題に対処するために、これまではいくつかのCSSプロパティを組み合わせて調整する必要がありました。

たとえば、、、

  • overflow-wrap: break-word;
  • word-wrap: break-word;
  • word-break: break-all;
  • white-space: nowrap;

などが代表的です。

overflow-wrap:break-word; の欠点

overflow-wrap: break-word;は自動で折り返しされますが、幅指定のないFlexboxなどではテキストがはみ出してしう不具合がありました。
そのため word-break: break-all; と併用する必要がありました。

body {
	 overflow-wrap: break-word;
	 word-break: break-all;
}

しかし今度は英文の単語が中途半端な箇所で折り返されてしまい読みにくくなってしまうことに。

word-break:break-word; は非推奨

ここでword-break:break-word;を指定するアイディアを思いつく方もいるかもしれません。
これを使えば単語ごとに折り返し指定することはできますが、実はword-break:break-word;は非推奨となっているため実質使えません。

word-break – CSS: カスケーディングスタイルシート | MDN

overflow-wrap:anywhere; の登場

そんな中で、近年新しく登場したのが「overflow-wrap:anywhere;」です。
このプロパティを使えば、長い単語がコンテナの幅を超えてしまう場合に、強制的に単語内で折り返しを発生させることができ、Flexboxでも問題なく改行されます。
MacOSのSafariでもバージョン15.4（Released:2022-03-14）から実装され、現在すべてのモダンブラウザでサポートされています。

.content {
	 overflow-wrap: anywhere;
}

overflow-wrapで指定できる値

  • overflow-wrap: normal; /* 単語と単語の間など可能な場所でのみ改行（初期値） */
  • overflow-wrap: break-word; /* 単語の途中で改行されるが、一部ブラウザで不具合アリ */
  • overflow-wrap: anywhere; /* break-wordと同様に単語の途中で改行、モダンブラウザ全てで実装 */

というわけで。
今後は overflow-wrap:anywhere; 使用していきましょう。

また、お使いの「スタイルシート・リセット」もこの機会に更新するのがよいかもしれません。

【社内用】新しい「スタイルシート・リセット」のカタチ『ONZE Reset CSS』の設定。