MogLog

メモというか日記というか備忘録というか

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

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


f:id:mogulla3:20130203132936p:plain


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

div {
  word-break: break-word;
}

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


f:id:mogulla3:20130203133134p:plain


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


word-breakプロパティについては以下を参照。
word-break-スタイルシートリファレンス