HTML
HTML5
HTMLタグ
スマートフォン
CSS
CSSプロパティ
CSS・HTML便利ツール
HTML色見本
配色組み合わせツール
特殊文字
JAVA
Android
PHP
Smarty修飾子
EXCEL
WEB技術の辞書・解説・使用例
TOP
>
CSS
>
CSS辞典
> word-break
word-break
文章整形
改行
便利
単語の途中での改行の仕方について指定。
ツイート
W3Cで審議中のCSS3の仕様をInternet Explorerが先行採用。
長い英単語やURLなどを記述した場合、ボックスなどから文章がはみ出す事が多くあります。
その対処方法として、word-break:break-all; が良く使われます。
normal
英語等は単語の途中では改行せず、単語の切れ目で改行。
日本語・中国語・韓国語等は表示範囲に合わせて改行。
単語の途中で改行される場合もあり。
break-all
言語に関係なく表示範囲に合わせて改行されます。
単語の途中で改行される場合もあり。
keep-all
言語に関係なく単語の切れ目のみで改行。(単語の途中では改行しない)
関連プロパティ word-wrap
word-breakに似たプロパティとして
word-wrapプロパティ
があります。
word-breakプロパティは日本語の単語には無効であり、英単語の途中で改行させたくない場合に用います。
word-break:normalの例
あいうえおかきくけこさしすせそたabcdefghijklmnopqrstuvwxyz
wordbreak wordbreak wordbreak wordbreak
word-break:break-allの例
あいうえおかきくけこさしすせそたabcdefghijklmnopqrstuvwxyz
wordbreak wordbreak wordbreak wordbreak
word-break:keep-allの例
あいうえおかきくけこさしすせそたabcdefghijklmnopqrstuvwxyz
wordbreak wordbreak wordbreak wordbreak
参考情報
ブロックから文字がはみ出してしまう場合の対処方法
word-break, word-wrap, white-space の動作例
word-break:break-all, word-wrap:break-word の挙動の違い