normal言語ごとの通常の規則を使う
英単語は単語の区切りを優先し、日本語などのCJKテキストは通常の文字間で改行します。
word-break
英単語や日本語が行末へ届いたとき、文字列の途中で改行してよいかを指定するプロパティ。英語と日本語を並べて、値ごとの行の切れ方を比べます。
CSSのword-breakとは？
英単語と日本語が行末へ届いたときの改行をライブプレビューで比べながら、normal・break-all・keep-allの違いを初学者向けに解説します。
遊んでみよう
英単語と日本語の行末で、改行位置を比較
ENGLISH
Design Supercalifragilisticexpialidocious clearly.
日本語
初学者向けウェブデザイン文字組み練習教材を比較します。
CSS
.element word-break: normal;
値のパターン
word-breakの構成要素
break-all英単語も行末の文字で分ける
CJK以外のテキストで単語の途中にも改行を許し、単語全体を次の行へ送れる場合でも行末で分割します。
keep-allCJKの文字間で改行しない
日本語・中国語・韓国語などのCJKテキストで文字間の改行を許可しません。CJK以外はnormalと同じです。
早見表
初期値はnormalです。break-allは英単語を積極的に分割し、keep-allは反対にCJKテキストの文字間改行を止めます。
01
normal言語ごとの通常の規則で改行初期値02
break-allCJK以外の単語も任意の文字間で改行強制分割03
keep-allCJKテキストの文字間改行を許可しないCJK向け04
break-word必要なとき長い単語を途中で改行非推奨05
auto-phrase自然なフレーズの途中を避けて改行実験的06
manual改行位置を手動で指定するための値未対応07
inherit親要素の指定値を受け継ぐグローバルよくある使い方
01
長い識別子を狭い表へ収める
英数字の識別子をどの文字でも分割してよい場合、break-allでセルの幅を押し広げにくくできます。
.identifier { word-break: break-all; }02
CJKの短い名前をひとまとまりにする
日本語などの短い見出しやブランド名へkeep-allを指定し、文字の途中で行が切れるのを防ぎます。
.brand-name { word-break: keep-all; }03
古いbreak-word指定を整理する
既存コードのbreak-wordは非推奨です。通常の改行を保って長い文字列だけ分割するならoverflow-wrapへ移します。
.message { overflow-wrap: anywhere; }ポイント
長い文字列のはみ出し対策だけなら、overflow-wrapを先に選ぶ。
word-breakの初期値はnormalで、テキストに適用され、子要素へ継承されます。break-allは単語全体を次の行へ送れば分割を避けられる場合でも、CJK以外の単語を行末で切ります。予期しないURLや長い単語だけを必要時に分割するならoverflow-wrap: anywhereの方が通常の単語境界を保てます。keep-allはCJKテキストの文字間改行を止めるため、長い日本語が箱からはみ出さないか確認します。言語ごとの通常規則を使えるようHTMLのlang属性も正しく指定します。break-wordは非推奨で、auto-phraseは実験的、manualは現在ブラウザー未対応です。値の切り替えは離散的に変化します。
関連するCSSも見てみよう。
word-break と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。