[CSS] 文章の折り返し ― overflow-wrap: anywhere と word-break: break-all の違いと使い分けを解説

近年、文章の折り返し指定に関するCSSの新しい方法として紹介されることが増えてきた
「overflow-wrap: anywhere;」と、従来からよく使われている「word-break: break-all;」の違いについて、表示の挙動を比較してみました。

overflow-wrap: anywhere; を使用した方法

 
・overflow-wrap: anywhere;
　長い連続した文字列が表示領域に収まらない場合、自動的に折り返されます。
・word-break: normal;
　単語の途中での改行を避け、できるだけ自然な英語の改行が行われます。
・line-break: strict;
　日本語の句読点などが行頭や行末に来ないよう、厳密に処理されます。
 
主な用途
・日本語と英語が混在する文章で、読みやすさを重視したいとき
・英単語の途中で改行されるのを避けたいとき
・長いURLやメールアドレスを自然に折り返したいとき
 
「可読性を保ちつつ、自然に折り返したい」場合に最適な方法です。

word-break: break-all; を使用した方法

 
・長い連続した文字列が表示領域に収まらない場合、単語の途中でも強制的に改行されます。
・英語などスペースで区切られる言語では、単語が分断されるため読みにくくなる可能性があります。
 
主な用途
・テーブルのカラムなど、限られた幅の中に文字を詰め込みたいとき
・単語の途中でも折り返してレイアウトを崩したくないとき
 
「見た目よりも、文字がはみ出さずに収まることが最優先」のケースに適しています。

デモ

See the Pen
[CSS] 長い文字列の折り返し by mkl may (@mkl-may)
on CodePen.

比較表

比較項目	overflow-wrap: anywhere; 使用	word-break: break-all; 使用
改行位置	単語の途中では改行しない	単語の途中でも改行される
読みやすさ	自然で読みやすい	単語の分断により読みづらい場合がある
URLの折り返し	自然な折り返し	強制的に分割される
表の文字詰まり対策	可読性を保ちながら対応可能	より強力に対応可能（ただし可読性は低下）

使い分けの例

使用シーン	推奨スタイル
長いURLやメールアドレスの改行	overflow-wrap: anywhere;
多言語（英語＋日本語）で読みやすさを重視	overflow-wrap: anywhere; word-break: normal; line-break: strict;
狭いカラム内に文字を詰め込みたいテーブル	word-break: break-all;