半角英数字が改行されない場合のCSS対応

white-space:normalやpre-wrapを設定しているのに、半角英数字の羅列になると、改行されずに、親のコンテナを突き破っていく…

なんてケースがあると思います。

その場合の対処としては、

word-break: break-all;
overflow-wrap: anywhere;

上記のCSSのどちらかを対象のpタグに設定するようにしましょう。

基本的には、overflow-wrap: anywhere;の設定を推奨します。

word-break: break-all

word-break: break-allでも改行されると思いますが、非推奨という扱いになっています。

また、個人的な体験になりますが、スマホのデバイスによっては正常に改行されないケースもあったので、あまりオススメしません。

まとめ

半角英数字の羅列を表示する可能性がある場合は、

overflow-wrap: anywhere;

の設定を忘れないようしましょう。

忘れると、親コンテンツを突き抜けて、デザインを大きく崩す原因となるので注意しましょう。