CSS:overflow-wrap break-wordが効かない

今回は、cssでoverflow-wrapでbreak-wordを使った際に、この設定がなぜか効かずに原因がわかるまではまった事があり、その対処の備忘録です。

CSSのプロパティ「overflow-wrap」

overflow-wrapは、インライン要素に対して、テキストがそのボックスの幅の長さ以上だった際の振る舞いを設定する事ができます。

overflow-wrap:normal;

単語の単位(単語間のスペースなどで判断)で分割し改行します。そのため、テキストがボックスの幅の長さに到達した際に、これが長い単語だった場合には、あふれる(はみ出す)場合があります。

例)こんな感じです。。。黄色の部分がボックスです。

overflow-wrap:break-word;

テキストがそのボックスの幅の長さに到達した際、これが長い単語だった場合には、単語を分割し(break-word)、ボックスからあふれない(はみださない)ようにテキストを表示します。

例)

その他、overflow-wrap:anywhereというのもあるのですが、使った事が無いので割愛します(なお、iOSでは使えない指定です)。

今回発生した事象

以下の用に、overflow-wrap:breadk-wrapを使い、ボックスからはみ出さないように指定しているのですが、テキストがはみ出しています。

再現例)

原因

display:inline-block;や、float:left;、position:absolute;などのプロパティが設定されているような場合においては、幅と最大幅を指定する必要があります。

この幅指定が無いと、width:auto;となり、自動的に親のボックスが子供の要素幅に合わせて縮小されます。

そのため、overflow-wrap:breadk-wrapを使って、ボックスからテキストがはみ出さないように指定しても、親のボックス幅を計算する事ができず、あふれたかどうかの判断ができないため、このプロパティが効かない事象が発生していました。

対処

以下のように書き換えたところ問題なく、ボックスからテキストがあふれずに表示されます。

対処例)

わかるとあ～なるほどとわかるのですが、はまってしまうと抜けだすのが本当に大変です。

皆さまのお役に立てれば幸いです。