概要

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 | break-word

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 の定義
草案 初期定義

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,