[CSS]半角英数字の文字列をdivボックスから折り返すプロパティ「word-break」

CSSネタです。

divボックス内に例えばp要素などで半角英数字の文字列を記述すると上手く折り返されず、文字列がdivボックスを突き抜けてしまいます。

今回は、こんな現象を防ぐためのcssプロパティのご紹介。

適用したい要素に「word-break」プロパティを指定してあげます。

例えば、このような感じ。

p {
 word-break: break-all;
}

「word-break」プロパティは、IEの独自プロパティです。

しかしながら、Webkitレンダリングエンジンを採用しているブラウザ「Safari」、「Google Chrome」では『break-all』を指定できます。

Safariで使用できるプロパティなので、iPhoneサイト制作などにもガンガン使うことができますね。

関連するWeb制作・開発Tips

関連リンク