定義と使い方

word-breakプロパティは、テキストがテキストラインの末尾に達した際に、そのテキストの単語（word）をどのように改行（break）するかを指定します。

この属性は、改行（break）されるテキストの可読性を向上させるために非常に重要な役割を果たします。

特徴

  • テキストを単語で区切って記述する言語と、そうではない言語があります。
  • word-breakプロパティは、このように単語で区切るテキストと、そうではないテキストがテキストラインの末尾に達した際の改行ルールを指定します。
  • 特に、CJK（Chinese - Japanese - Korean, 中国語・日本語・韓国語）と非東アジア言語（non-CJK, 例: 英語）間の改行ルールは慣例上違いがあるため、このプロパティでそのルールを再設定することができます。

基本例

次の例では、日本語と英語のテキストに対して word-break プロパティの値を設定した際、それぞれの言語で改行（break）処理方式がどのように変わるかを確認することができます。

HTML 
<p>
    ちょうちょ、ちょうちょなのはにとまれなのはにあきたらさくらにとまれ。
    おゆうぎしましょう、たのしくあそびましょう。
</p>
<p>
    There's a veryveryveryveryveryveryveryveryveryveryveryvery
    longlonglonglonglonglonglonglong-longlonglonglong sentence.
</p>
CSS 
p {
    background-color: gold;
    word-break: /* value */
}
CSSデモ：word-break デモボタンをクリックしてみてください！

値

word-breakプロパティの値
normal 初期値です。
テキストがテキストラインの末尾に達した際に、単語を慣例的なルールに従って改行します。この慣例は言語によって次のように異なって適用されます。
  • 英語では単語単位で改行します。単語の途中では改行が行われず、必要な場合はハイフン（-, Hyphen）などを通じて区切ることができます。
  • 日本語では音節や文字単位で改行します。空白がない文字の並びでも自由に改行することができます。
break-all 単語がテキストラインの末尾の境界をオーバーフロー（overflow, 境界を越えること）し始める正確な地点で、単語を分割して改行させます。
keep-all 単語の途中を分割して改行することはありません。つまり、単語の末尾（単語と単語の間の空白）でのみ改行します。この値はCJK（Chinese - Japanese - Korean, 中国語・日本語・韓国語）テキストにのみ適用され、他の言語ではnormalと同様に実装されます。
break-word 非推奨の値です（現在は使用されていません）。
以前使用されていた値であり、過去との互換性を維持するために非推奨ながらもサポートされています。今後は使用すべきではありません。
この値は、word-break: normalとoverflow-wrap: anywhereを同時に指定した際と同様の効果があります。

ご確認ください！
テキストがテキストラインの末尾に達した際、単語にハイフン（-, Hyphen）が含まれていると、word-breakプロパティの値に関わらずハイフンの箇所で単語を分割して改行させます。これは、古くからの慣例的なルールにCSSが従っているためです。

形式構文

CSS 
selector {
    word-break: /* value */
}

構文

CSS 
/* キーワード値 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 非推奨の値 */

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

形式定義

word-breakプロパティの形式定義
初期値 normal
適用対象 すべての要素
継承 はい
アニメーション いいえ

ブラウザ互換性

word-breakプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
word-break 1 12 15 3
word-breakプロパティのkeep-all値のブラウザ互換性
値
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
keep-all 44 12 15 9
word-breakプロパティのbreak-word値のブラウザ互換性
値
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
break-word 1 79 67 3

caniuse.comで詳しい情報をご確認ください。

仕様書

word-breakプロパティに関する仕様書
仕様書
word-break CSS Text Module Level 3
#word-break-property

参考資料

関連項目