divやarticleなどのブロック要素で囲まれてる枠を、テキストがはみ出して表示されてしまう現象への対処方法について。
具体的には以下の画像のような現象のこと。
原因は調べていないが、特に英字で起こるようである。
これを防ぐには、テキストを囲んでいるブロック要素に対してCSSで「word-break: break-word;」を記述する。
div { word-break: break-word; }
この一行を書くことで解決。
値は「break-all」でも平気なようだが、微妙に改行のタイミングが違うみたい。「break-word」のほうがいい感じに改行してくれているが、こちらはどうやらFirfoxでは効かないようだった。
「break-all」であれば、ChromeでもFirefoxでも問題ないよう。
word-breakプロパティについては以下を参照。
word-break－スタイルシートリファレンス