ちょこっとだけハマったので備忘録としてまとめ。
word-break プロパティを使った文字列の改行ができなかった時の確認事項です。
今回参考にさせていただいた記事はこちら。
CSS tips – 文字列を確実に改行させる方法｜phiary
http://phiary.me/css-tips-certainly-line-break/
まず、基本的には下記を指定します。
p {
word-break: break-all;
}
break-all という値の場合、英単語の途中だろうが問答無用で改行されます。
それが嫌な場合は、normal もしくは keep-all を指定してください。
また、white-space プロパティに nowrap が指定されている場合、改行されなくなるとのことですので、下記のように指定します。
p {
word-break: break-all;
white-space: normal;
}
ちなみに、white-space: nowrap; とは、文字列内のホワイトスペースを無視し、改行を1つの半角スペースとして表示します。
また、ボックスサイズが指定されている場合にも自動改行しないため、こちらを無効にする必要があります。
あとは、width が効かない inline 要素では、word-break による改行が行われないので、デザインに影響がなければ、display:block; を指定しましょう。
ちなみに、私の環境で文字列の改行が行われなかったのも、こちらが問題でした。
width が定義されておらず、横幅が想定以上に伸びてしまい、表示されない変な位置で改行をしていたようです。
そのため、width: 100%; を指定したところ、理想通りの表示になりました。
以上、word-break を使った文字列の改行ができなかった時の対処法でした。
正しくは、要素のサイズが正しくなかったのが原因ですが…とりあえず、レイアウトは調整できました。
