ブロック要素の枠をテキストがはみ出す現象への対処方法

div や article などのブロック要素で囲まれてる枠を、テキストがはみ出して表示されてしまう現象への対処方法について。 具体的には以下の画像のような現象のこと。

原因は調べていないが、特に英字で起こるようである。 これを防ぐには、テキストを囲んでいるブロック要素に対して CSS で「word-break: break-word;」を記述する。

div {
  word-break: break-word;
}

この一行を書くことで解決。

値は「break-all」でも平気なようだが、微妙に改行のタイミングが違うみたい。「break-word」のほうがいい感じに改行してくれているが、こちらはどうやら Firfox では効かないようだった。 「break-all」であれば、Chrome でも Firefox でも問題ないよう。

word-break プロパティについては http://www.htmq.com/style/word-break.shtml を参照していた（※ 現在はリンク切れ）。