Chromeはword-break:break-allが効かない overflow-wrap:break-wordに | おすすめ情報お届け屋

HTMLでは文字の折り返しをCSSのword-breakで制御する。単語を維持するとか、折り返さないとか、いろんな形に制御できる。 多くの場合、特に指定せずともブラウザのデフォルト値で問題ない。だけど、長いURLを記述したときなんかに、文字が領域からはみ出してしまうことがある。ブラウザがその文字列をひとつの英単語として認識し、折り返さずに表示しようとするからだ。 こういうときに、word-break:break-all を指定すると、幅に応じて全ての文字が折り返される。 しかし、Chromeではこの指定が有効にならない場合があるようだ。あるサイトで、記号でできた長い文字列が折り返されず、領域外にはみ出すという現象が起きてしまった。 調べてみると、そもそもword-break自体が文字の折り返しではなく、文章の改行について制御するためのものなんだって。文字の折り返しを制御するにはword-w