単語の改行方法を制御するプロパティです。normal、break-all、keep-allなどがあり、長い単語やURLの処理に便利です。日本語と英語が混在する文章でも適切な改行を実現できます。
word-break: normal | break-all | keep-all | break-word| break-all | word-break: break-all |
| break-keep | word-break: keep-all |
英単語の折り返しなら word-break ではなく break-words（overflow-wrap）が先。
word-break: break-all;任意の文字で改行（英数字も含む）
word-break: keep-all;単語を分割せずに改行
.url {
word-break: break-all;
overflow-wrap: break-word;
}長いURLの改行処理
/* 日本語を文節単位で自然に折り返す */
h1 {
word-break: auto-phrase;
}見出しを文節の切れ目で折り返す（Chrome 119+限定）
日本語サイトではkeep-all、英語サイトではbreak-wordが一般的。
AIは「はみ出し対策」にword-break: break-allを多用しがちですが、英単語がぶつ切りになる副作用があります（多くの場合overflow-wrapが正解）。また日本語の見出しにはword-break: auto-phrase（文節改行、Chrome限定）という新しい選択肢があり、AIの知識にはまだ無いことが多い機能です。
日本語見出しの改行位置が不自然。word-break: auto-phraseとtext-wrap: balanceを組み合わせて、非対応ブラウザでも崩れない形で整えて
word-break・overflow-wrap・white-spaceの役割分担を整理して、このサイトのテキスト折り返しポリシーを設計して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
auto-phrase値のみChrome 119+限定（2026年7月時点）