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

参考情報