この記事の要点

word-break は単語の途中で改行する位置のルールを制御する CSS プロパティ 主な値: normal / break-all / keep-all / break-word break-all はどこでも改行可能、URL や長い英単語の折り返し用 keep-all は CJK 文字でも単語境界（空白など）でしか改行しない overflow-wrap（旧 word-wrap）とは役割が異なる。両者を組み合わせて使うことが多い

word-break プロパティとは

word-break は CSS でテキストの改行ルールを制御するプロパティです。特に長い英単語や URL、CJK（中国語・日本語・韓国語）混在テキストでレイアウトが崩れるのを防ぎます。

基本構文

セレクタ {
  word-break: normal | break-all | keep-all | break-word;
}

指定できる値

値	意味	備考
normal	既定。言語ごとの通常規則で改行	日本語は文字単位、英語は単語境界で改行
break-all	どの文字の間でも改行可能	長い英単語 / URL の折り返しに有効
keep-all	CJK の文字も単語境界（空白など）でしか改行しない	中国語・韓国語の整形に有用
break-word	overflow-wrap: anywhere 相当（古い別名）	非推奨。overflow-wrap 推奨

各値の挙動例

.normal    { word-break: normal; }
.break-all { word-break: break-all; }
.keep-all  { word-break: keep-all; }
.box       { width: 200px; border: 1px solid #ccc; padding: 8px; }

長い英単語のケース

「supercalifragilisticexpialidocious」のような長い 1 語が、200px の枠に入り切らない場合：

値	結果
normal	1 語のまま枠からはみ出す（横スクロール発生）
break-all	枠ギリギリで折り返す
keep-all	normal と同じ（英語では効果なし）

日本語テキストのケース

「これは非常に長い日本語のテキストです」のような場合：

値	結果
normal	文字単位で適宜折り返す（自然な日本語表示）
break-all	normal と似た見た目だが、英単語も無理に分割される
keep-all	日本語が分割されず、半角スペースまで枠を突き抜ける（通常使わない）

word-break と overflow-wrap の違い

2 つは似て非なるプロパティです。役割と発動条件が違います。

項目	word-break	overflow-wrap (旧 word-wrap)
発動条件	常に改行ルールを変える	通常の改行で収まらないときだけ発動
break-all 相当	word-break: break-all	overflow-wrap: anywhere
break-word 相当	word-break: break-word（非推奨）	overflow-wrap: break-word
用途	長文の改行ルール統一	はみ出し回避のセーフティネット

推奨パターン

はみ出すと困るが、見た目はできる限り自然にしたい場合の定番セットです。

.safe-wrap {
  overflow-wrap: anywhere;   /* どうしても入らないときだけ分割 */
  word-break: normal;        /* 通常は言語規則に従う */
}

/* 長い URL や英単語が多い場面 */
.code-text {
  word-break: break-all;
  font-family: monospace;
}

/* テーブルのセル内ではみ出し防止 */
td {
  word-break: break-word;     /* 古い名前 */
  overflow-wrap: anywhere;    /* 新しい書き方 */
}

line-break との連携

CJK 言語では line-break プロパティで「行頭・行末に来てはいけない記号」のルール（禁則処理）を制御します。word-break と組み合わせて細かい組版を実現します。

.article-body {
  word-break: normal;
  line-break: strict;   /* 強い禁則処理 */
}

hyphens プロパティとの違い

プロパティ	役割
word-break	分割可能位置のルール
overflow-wrap	はみ出し時の救済
hyphens	ハイフンを挿入して英単語を分割（言語設定 lang 必須）
line-break	CJK の禁則処理

よく使うケース別レシピ

シーン	CSS
長い URL がレイアウトを破壊	word-break: break-all;
カードに長文をきれいに収めたい	overflow-wrap: anywhere;
日本語と英語の混在テキスト	word-break: normal; overflow-wrap: anywhere;
テーブルの URL 列	td { word-break: break-all; }
コードブロックの長い行	pre { white-space: pre-wrap; word-break: break-all; }

よくあるトラブル

症状	原因と対処
break-all を当てたのに改行しない	親要素に white-space: nowrap が当たっている
日本語が変な場所で切れる	word-break: normal + line-break: strict で禁則処理を効かせる
テーブルで横スクロールしてしまう	セルに word-break: break-all; または table-layout: fixed;
break-word を指定したが効かない	仕様上は overflow-wrap の値であるべき。両方書いて互換性を確保

FAQ

Q: モバイルで長いリンクが画面からはみ出る
A: 該当要素に word-break: break-all または overflow-wrap: anywhere を当てれば解決します。

Q: 英文の途中で変な位置で切れる
A: word-break: break-all を当てると単語の途中でも改行します。読みやすさ重視なら overflow-wrap: break-word がおすすめ。

Q: word-break と white-space は併用できる？
A: できます。white-space が改行可能かどうかを決め、word-break が改行位置のルールを決めます。

関連

• テキスト — 親カテゴリ
• overflow-wrap (word-wrap) — はみ出し時の改行
• line-break — CJK の禁則処理
• hyphens — ハイフネーション
• white-space — 空白と改行の扱い