ウェブランサー

word-break - 文の改行の仕方について指定する

対応ブラウザ
IE7対応IE8対応Firefox非対応Chrome対応Opera非対応Safari対応
適用対象 ブロックレベル要素
継承 する

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".
text_sample02 [word-break: break-all;]
世界一長い単語は"Pneumonoultramicroscopicsilicovolcanoconiosis"です。
これは、珪性肺塵症(けいせいはいじんしょう)を意味するそうです。
The longest word in the world is "Pneumonoultramicroscopicsilicovolcanoconiosis".
text_sample03 [word-break: keep-all;]
世界一長い単語は"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 文字表記の方向(縦横)を指定する