MDN will switch to a new design later today, a sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概要

CSS の word-break プロパティは、改行に関する禁則処理の方法を変更するために用います。

初期値normal
適用対象全要素
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* グローバル値 */
word-break: inherit;
word-break: initial;
word-break: unset;

normal
デフォルトの改行ルールを使用する。
break-all
CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
keep-all
CJK テキストの改行を許可しません。CJK 以外のテキストについては normal と同じ挙動となります。

形式的構文

normal | break-all | keep-all

HTML コンテンツ

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> 

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> 

<p>3. <code>word-break: keep-all</code></p>
<p class="keep narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

CSS コンテンツ

.narrow {
    padding: 5px;
    border: 1px solid;
    width: 8em;
}

.normal {
    word-break: normal;
}

.breakAll {
    word-break: break-all;
}

.keep {
    word-break: keep-all;
}

仕様

仕様書 策定状況 コメント
CSS Text Module Level 3
word-break の定義
草案 初期定義

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 (有) 15.0 (15.0) 5.5[1,3] 15 (有)
keep-all 44 未サポート 15.0 (15.0) 5.5 31 9
機能 Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 18.0 (有) 15.0 (15.0) ? 未サポート ?
keep-all 未サポート[2] 未サポート[2] 未サポート 15.0 (15.0) ? 未サポート 9

[1] IE8 では、独自実装であった -ms-word-break と同等の word-break がすでに実装されています。ベンダープリフィックス (ベンダー接頭辞) の -ms- 付きの -ms-word-break を用いる必要はありません。

[2] WebKit bug 123782

[3] Internet Explorer は、どのバージョンも initial 値を サポートしていません

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, teoli, fscholz, Sebastianz, ethertank, sosleepy
 最終更新者: yyss,