2015-03-06　カテゴリ：ソフトウェアタグ：Chrome、CSS、overflow-wrap、word-wrap

HTMLでは文字の折り返しをCSSのword-breakで制御する。単語を維持するとか、折り返さないとか、いろんな形に制御できる。

多くの場合、特に指定せずともブラウザのデフォルト値で問題ない。だけど、長いURLを記述したときなんかに、文字が領域からはみ出してしまうことがある。ブラウザがその文字列をひとつの英単語として認識し、折り返さずに表示しようとするからだ。

こういうときに、word-break:break-all を指定すると、幅に応じて全ての文字が折り返される。

しかし、Chromeではこの指定が有効にならない場合があるようだ。あるサイトで、記号でできた長い文字列が折り返されず、領域外にはみ出すという現象が起きてしまった。

調べてみると、そもそもword-break自体が文字の折り返しではなく、文章の改行について制御するためのものなんだって。文字の折り返しを制御するにはword-wrapってのを使えばいいらしい。

2つ目のプロパティにword-wrapとoverflow-wrapを併記していますが、これは現在策定中のCSS3仕様案ではword-wrapからoverflow-wrapへと改称されたためです。Internet ExplorerやFirefoxでは未だ新しいoverflow-wrapのプロパティ名称がサポートされていないため、overflow-wrapを用いる場合は、後方互換性のためにword-wrapの名称も一緒に記載する必要があります。

word-breakとword-wrapはややこしい｜Web制作 W3G

まあなんにせよoverflow-wrap:break-wordとword-break:break-allを指定しておけば大抵の場合は大丈夫そうだ。

次の記事：神保町の立ち食い蕎麦「いわもとQ」に行ってきた

前の記事：Postfixで大文字のユーザーにメールが届かない、送れない

avator

Chromeはword-break:break-allが効かない overflow-wrap:break-wordに

関連記事