文章の折り返しCSS

 

文字列の折り返しについて、多くの場合、日本語は問題が起きないが、URLなどの半角文字が折り返さなくてレイアウトが崩れることがある。

 

最新のCSSだと、overflow-wrap を使って、このように書ける。

 

overflow-wrap: anywhere;

 

これだと、通常時、Flex時、共にレイアウトを崩さず折り返すことが出来る。

ブラウザの対応状況は、2022年くらいからほぼ対応しているので、環境が許す限りはこれを使うべき。

https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere

 

 

overflow-wrap:break-word だと、Flex内では正常に折り返せないので注意。

 

 

word-wrap について

word-wrap プロパティは過去にInternet Explorer向けに開発されたもので、現在はoverflow-wrap に改名されているのでこちらを使うべき。

互換性のため、word-wrap も残されている。

 

 

word-break:break-all;

 

これだと、シンプルに英字を折り返す事が出来るが、単語を無視するので、単語の途中で折り返してしまい、英語が読みにくくなる。

 

word-break: break-word;

 

これは、overflow-wrap: anywhere と同じ効果をもたらすが、現在非推奨のため、なるべく使わない方が良い。