word-break
CSSの書き方
word-break:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | word-break | 読み方 | ワード・ブレイク | ||
| 初期値 | normal | 意味 | 単語の改行調整 | ||
| 値 | normal/break-all/keep-all | ||||
| 対象 | すべての要素 | ||||
| CSSレベル | IE独自 | 対応ブラウザ | Windows | MAC | |
| 継承 | する | IE 5.0以上 | — | ||
解説
文章中の単語の改行の処理を指定するスタイルシートです。
単語が文章の途中で改行されてしまうと、読みにくくなってしまうことがありますが、これを回避することができます。
「word-break」プロパティに対する値は3種類です。
不安定なプロパティ
「word-break」プロパティで設定できる値によっては、英数字と漢字などの改行の仕方が異なったり、「word-break」プロパティの内容が優先されて、要素の幅が自動的に伸張するといった現象が見られるため、使用頻度の低いプロパティです。
具体的な挙動は以下の通りです。
| 値 | 英語等の改行方法 | 日本語の改行方法 |
|---|---|---|
| normal | 単語と単語の区切りで改行される | 単語の途中でも、要素の幅によって改行されることもある |
| break-all | 単語の途中でも、要素の幅によって改行されることもある | 単語の途中でも、要素の幅によって改行されることもある |
| keep-all | 単語と単語の区切りで改行される | 単語と単語の区切りで改行される |
※引用元：藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P139、2005
IEのみ対応
InternetExplorer独自の仕様ですので、他のブラウザでは対応していません。
なお、この「word-break」プロパティはCSSレベル3の「word-break-cjk」プロパティとほぼ同じ仕様だそうです。
CSS/HTMLサンプル
p { width:400px; word-break:keep-all; }
段落要素に対し単語の改行処理を指定 サンプル
