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プロパティ
| 文字揃え・段落の振る舞い | |
|---|---|
| baseline-shift | 優先するベースラインを指定し直す |
| direction | 文字表記の方向（左右）を指定する |
| drop-initial-after-adjust | 頭文字の第一接続点の揃え位置を指定する |
| drop-initial-after-align | 頭文字の第一接続点の揃えラインを指定する |
| drop-initial-before-adjust | 頭文字の第二接続点の揃え位置を指定する |
| drop-initial-before-align | 頭文字の第二接続点の揃えラインを指定する |
| drop-initial-size | 頭文字のサイズを指定する |
| drop-initial-value | 頭文字を何行分にするかを指定する |
| letter-spacing | 文字の間隔を指定する |
| line-break | 要素内での行末や行頭の禁則処理の厳密さを指定する |
| line-height | 行の高さを指定する |
| line-stacking | 行ボックスに関する指定をまとめて行う |
| line-stacking-ruby | 行ボックスを重ねる際のルビの扱いを指定する |
| line-stacking-shift | 文字のベースラインを考慮するかどうかを指定する |
| unicode-bidi | 文字表記の方向（左右）を指定する |
| white-space | テキスト内の空白、タブ、改行の表示の仕方を指定する |
| word-break | 文章の改行の仕方について指定する |
| word-spacing | 単語の間隔を指定する |
| word-wrap | 単語の途中における改行処理の仕方を指定する |
| writing-mode | 文字表記の方向（縦横）を指定する |