【word-break】テキストの改行方法の指定

word-breakプロパティでは、テキストを表示範囲に合わせて改行するか、単語の間で改行するか、などテキストの改行方法について指定することができます。

また似たような効果のあるword-wrapプロパティとの違いですが、word-breakプロパティがテキストの改行方法を指定するのに対し、word-wrapプロパティは、テキストではなく長い英単語の改行方法について指定したい場合に使用されるようです。

なおword-breakプロパティはInternet Explorer独自のプロパティとなります。

書式

  • word-break : ……… テキストの改行方法について指定する

★:normal、break-all、keep-all

normal
デフォルトのルールに従い改行します。英語などは単語の途中では改行されず、単語の間(空白がある部分)で改行され、日本語、中国語、台湾語、韓国語などは表示範囲に合わせて改行(全ての文字の間で改行)されます
break-all
英文・和文に関係なく、表示範囲に合わせて改行します。(単語の途中で改行される事もあります)
keep-all
英文・和文に関係なく、単語の間(空白がある部分)で改行します。(単語の途中では改行しません)

使用した時の例

.sample1 {word-break: normal;}
.sample2 {word-break: break-all;}
.sample3 {word-break: keep-all;}

div {width:50%; border:solid 1px #ccc;}
<div class="sample1">【normal】HTML・cssには指定できるサイズの単位が複数あります。特にcssでは...。
HTML · css has more than one unit of size you can specify. Especially at css ....</div>

<div class="sample2">【break-all】HTML・cssには指定できるサイズの単位が複数あります。特にcssでは...。
HTML · css has more than one unit of size you can specify. Especially at css ....</div>

<div class="sample3">【keep-all】HTML・cssには指定できるサイズの単位が複数あります。特にcssでは...。
HTML · css has more than one unit of size you can specify. Especially at css ....</div>

ブラウザ上の表示例

【normal】HTML・cssには指定できるサイズの単位が複数あります。特にcssでは…。 HTML · css has more than one unit of size you can specify. Especially at css ….
【break-all】HTML・cssには指定できるサイズの単位が複数あります。特にcssでは…。 HTML · css has more than one unit of size you can specify. Especially at css ….
【keep-all】HTML・cssには指定できるサイズの単位が複数あります。特にcssでは…。 HTML · css has more than one unit of size you can specify. Especially at css ….

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 address, blockquote, body, center, dd, dir, div, dl, dt, fieldset, form, hn, hr, legend, li, listing, marquee, menu, ol, p, plaintext, pre, table, td, th, tr, ul, xmp(ブロック要素)
メディア visual
対応ブラウザ Internet Explorer5~

関連情報