word-break：文の改行の仕方について指定する
| 適用対象 | ブロックレベル要素 |
| 継承 | する |
word-breakプロパティは、当初Internet Explorerが独自に採用したもので、表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、文の改行の仕方について指定する際に使用します。最新のブラウザでは実装されているものが増えています。
長い英単語を途中で改行させたくない場合はword-wrapプロパティを使うようです。
word-breakに与えられる値
- word-break: normal;
- 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。
- word-break: break-all;
- 言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。
- word-break: keep-all;
- 言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。
word-breakの使用サンプル
CSS
.text_sample01 {
word-break: normal;
width: 200px;
background-color:#EEEEEE;
padding: 5px;
margin: 0px 0px 10px 0px;
}
.text_sample02 {
word-break: break-all;
width: 200px;
background-color:#EEEEEE;
padding: 5px;
margin: 0px 0px 10px 0px;
}
.text_sample03 {
word-break: keep-all;
width: 200px;
background-color:#EEEEEE;
padding: 5px;
}
XHTML
<div class="text_sample01">
text_sample01 [word-break: normal;]<br />
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。<br />
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。<br />
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".<br />
</div>
<div class="text_sample02">
text_sample02 [word-break: break-all;]<br />
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。<br />
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。<br />
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".<br />
</div>
<div class="text_sample03">
text_sample03 [word-break: keep-all;]<br />
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。<br />
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。<br />
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".<br />
</div>
表示確認
text_sample01 [word-break: normal;]
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
text_sample02 [word-break: break-all;]
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
text_sample03 [word-break: keep-all;]
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症（けいせいはいじんしょう）を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
word-breakに関連するCSSプロパティ
| 文字揃え・段落の振る舞い | |
|---|---|
| direction | 文字表記の方向（左右）を指定する |
| letter-spacing | 文字の間隔を指定する |
| line-break | 要素内での行末や行頭の禁則処理の厳密さを指定する |
| line-height | 行の高さを指定する |
| unicode-bidi | 文字表記の方向（左右）を指定する |
| white-space | テキスト内の空白、タブ、改行の表示の仕方を指定する |
| word-break | 文章の改行の仕方について指定する |
| word-spacing | 単語の間隔を指定する |
| word-wrap | 単語の途中における改行処理の仕方を指定する |
| writing-mode | 文字表記の方向（縦横）を指定する |