word-break: keep-all は多言語対応のサイト
word-break: keep-all を指定したのに、改行位置がまったく変わらない、逆に改行してほしくない見出しが崩れる、英数字が混ざった途端にレイアウトが崩れるといったことはありませんか？
これらはすべて、keep-all の役割を誤解していることが原因で起こります。この記事では、keep-all が「何をするプロパティで、何をしないプロパティなのか」を整理したうえで、実務でよくあるつまずきパターンとその対処法をまとめます。
keep-all は改行位置を指定するプロパティではない
日本語・中国語・韓国語（CJK）のテキストは、CSSのデフォルト挙動（word-break: normal）では 文字と文字の間ならどこでも改行してよい ものとして扱われます。そのため、意味のあるまとまり（複合語や固有名詞）の途中で不自然に折り返されることがあります。
keep-allは「ここで改行しなさい」と指定するプロパティではなく、「ここでは改行しないでほしい」という抑制のためのプロパティです。
keep-all は、この「どこでも改行してよい」という挙動を抑制し、CJK文字が連続する区間の途中での改行を避けるようにします。しかし、どの位置で改行するのが「正しい」のかを言語的に理解しているわけではありません。最終的な改行位置の決定は、ブラウザの改行アルゴリズムに委ねられています。
この前提を押さえていないと、「指定したのに効かない」「効いているはずなのに変な位置で切れる」となるでしょう。
なぜ思った通りにならないのか
英数字混在で崩れる
keep-all を指定しても、長いメールアドレスやURLは折り返されずに要素からはみ出します。keep-all はあくまでCJK文字間の制御であり、英数字の連続文字列には影響しません。
お問い合わせはinfo@example-service.comまたは https://example.com/support/very-long-path-name までご連絡ください。
そのため、英数字が含まれる場合は overflow-wrap: break-word; を併用する必要があります。
意図した位置で改行されない
ブラウザは意味的な単語区切りの認識は行っていません。
例えばこのような文字列の場合。
<p>国立国会図書館デジタルコレクションの利用登録</p>国立国会図書館デジタルコレクションの利用登録
keep-all を指定しても、「国立国会図書館」と「デジタルコレクション」の間で必ず改行される保証はありません。ブラウザは「国立国会図書館デジタルコレクション」全体を、CJK文字が連続する一つの区間として扱う可能性があるためです。
改行してもよい位置を <wbr> タグで明示します。
<p>国立国会図書館<wbr>デジタルコレクション<wbr>の利用登録</p><wbr>（Word Break Opportunity）は、その位置で改行してもよいことをブラウザに伝えるタグです。keep-all と組み合わせることで、「基本は分断しないが、指定した箇所でだけ改行を許可する」という制御ができます。
国立国会図書館
絶対に改行してほしくない箇所がある
見出しやボタンラベル、ロゴ横のキャッチコピーなど、「ここは何があっても1行で表示したい」という箇所には、keep-all だけでは不十分です。幅が極端に狭い場合、keep-all を指定していても最終手段として改行が発生することがあります。
そんな時は、white-space: nowrap を部分適用します。white-space: nowrap は改行そのものを禁止するため、keep-all よりも強い制約です。ただし、はみ出しが発生した場合の対処（overflow: hidden や text-overflow: ellipsis との併用）もあわせて検討する必要があります。
言語ごとに挙動が違って見える
keep-all はCJK全般に効くプロパティですが、日本語・中国語・韓国語では単語の区切り方や禁則処理のルールが異なります。同じCSSでも、lang="ja" と lang="zh" では改行結果が変わることがあります。
多言語対応サイトでは、要素やページ単位で lang 属性を正しく設定したうえで、言語ごとに実機・実ブラウザで改行結果を確認する必要があります。
CSSの指定だけで全言語共通の「正しい改行」を保証することはできません。
実装パターン例
用途別に、実務でよく使う組み合わせをまとめます。
本文・長文コンテンツ
.body_text {
word-break: keep-all;
overflow-wrap: anywhere;
}複合語の不自然な分断は防ぎつつ、長い英単語やURLは要素幅に応じて折り返されます。
見出しやボタンラベルなどで使いやすい
改行させず、はみ出す場合は省略記号で対応できるパターンです。
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}特定の単語区切りだけ制御したい箇所
CSSだけで制御しきれない、コンテンツ側で意味を理解している必要がある改行は <wbr> を使います。
<h2>2026年度<wbr>実装ガイドライン</h2>ブラウザ差異について
keep-all を含む改行関連プロパティは、ブラウザやOSのバージョンによって挙動が微妙に異なることがあります。改行を重視するなら、主要ブラウザ（Chrome / Safari / Firefox）で確認することをおすすめします。
- 狭いコンテナ幅での折り返し位置
- 英数字とCJK文字の境界での挙動
<wbr>とkeep-allを併用した場合の優先順位
なお、似た名前のプロパティに line-break がありますが、これは句読点や記号の前後での改行可否を制御するもので、word-break: keep-all とは役割が異なります。
改行を思い通りにするために何を使うか
- 複合語や固有名詞の不自然な分断を防ぎたい →
word-break: keep-all - それでも長い英単語やURLがはみ出す →
overflow-wrap: break-word（またはanywhere）を併用 - ここは絶対に改行させたくない →
white-space: nowrap - ここでなら改行してほしい、という位置を明示したい →
<wbr>を挿入 - 多言語対応が必要 →
lang属性を設定し、言語ごとに実機検証
keep-all は単体で完璧な改行制御を実現するプロパティではなく、他のプロパティやタグと組み合わせて初めて実務レベルの精度になります。「効かない」と感じたときは、まず「このプロパティが本来担っている役割は何か」を考えることで適切に対応することができると思います。
カテゴリー : HTML-CSS
