word-break: break-allとは
word-breakはCSSのプロパティで、テキストの改行ルールを指定するものです。
break-allの値を使用すると、テキストの単語内でも強制的に改行されるようになります。
テキストがボックス内で折り返されるのを防止するために使用しているWebサイトをたまに見かけますが、ボックス内で折り返し防止には「overflow-wrap: anywhere」を使用するのが正しいです。
なぜword-break: break-allではダメなのか
例えば以下のような英文があるとします。
Mac cannot play an external Blu-ray drive alone
There may be cases where you want to connect an external Blu-ray drive to play Blu-ray discs on a Mac, but a Mac cannot play Blu-ray discs with an external Blu-ray drive alone.
To play Blu-ray discs on a Mac, you will need software to play Blu-ray discs.
https://iwb.jp/zeus-player-better-than-mac-blu-ray-player/
これに「word-break: break-all」を付けると英単語が途中で折り返してしまいます。
日本語だと単語の途中で折り返すのは普通なので気にならない方もいるかもしれませんが、普段英文を読む方や、英語圏の方が見た場合はかなり読みづらい文章になっています。
Mac cannot play an external Blu-ray drive alone
There may be cases where you want to connect an external Blu-ray drive to play Blu-ray discs on a Mac, but a Mac cannot play Blu-ray discs with an external Blu-ray drive alone.
To play Blu-ray discs on a Mac, you will need software to play Blu-ray discs.
https://iwb.jp/zeus-player-better-than-mac-blu-ray-player/
折り返し防止には「word-break: break-all」ではなく「overflow-wrap: anywhere;」を使用して、さらに「line-break: strict;」で厳格な禁則処理の改行を適用するのが日本では主流となっています。
そのため、折り返し防止のCSSの適用は以下のように指定することをオススメします。
CSS
body {
overflow-wrap: anywhere;
line-break: strict;
}※ Webサイトによっては「word-break: normal; 」を書いているケースもありますが、word-breakはnormalがデフォルト値なので不要な指定です。
