CSSのoverflow-wrapとword-breakの違いを解説！

CSSのoverflow-wrapやword-breakやword-wrapのような折り返しや改行を制御するプロパティは複数あり、それぞれがどういう意味なのか分かりづらく混乱している方も多いかと思います。

そこで今回はoverflow-wrapとword-breakの違いを解説していきたいと思います。

まずword-wrapプロパティに関してですが、このプロパティはMicrosoft拡張のプロパティでしたが、標準化と改名がされ、overflow-wrapという名称に変更されています。

overflow-wrapとword-wrapは互換性があり、word-wrapでも現在利用可能で、古いブラウザへの対応を行うならむしろword-wrapの方が良い場合もあります。

今回は改名後のoverflow-wrapとして解説していきます。

まずはoverflow-wrapとword-breakのそれぞれの目的を見ていきましょう。

• overflow-wrap: 分割できない文字列がボックスからはみ出る場合に、単語内で分割できるかどうかを指定。
• word-break: 単語内で分割する方法（または分割するかどうか）を指定。

• overflow-wrap: ボックスからテキストがはみ出た場合（オーバーフロー時）にどうするか決める
• word-break: 単語を改行しないとテキストがあふれる場合に改行するか決める

何ともややこしいoverflow-wrapとword-breakですが、両者ともはみ出た場合に改行するかどうかを制御しているプロパティであることは共通です。

ただし、はみ出たと判断するのがボックス視点からかテキストの単語からの視点というところが異なります。

改行を入れるかどうかを指定するのは両者とも可能なため、いずれのプロパティを指定しても単語のはみ出た部分をどうするかは制御することが出来ます。つまりテキストがはみ出ているのを見つけたらoverflow-wrapでもword-breakでも、どちらを使っても解決可能です。

ただプロパティとして別々に存在しているため、overflow-wrapもword-breakも同時に指定する事が可能になります。

それでは次の章でそれぞれのプロパティで設定できる値とその挙動を見ていきましょう。

[日本語・中国語・韓国語の場合]
表示範囲にあわせて改行される。

[英語等]
単語の途中では改行されず、単語の切れ目（スペース区切りなど）で改行される。

つまりサンプルコードで見ると下記となります。

英語の場合は長い単語の場合でも単語の途中で改行が入ることはなく、そのままボックスをはみ出します。

一方で日本語（カタカナ）の場合は単語の途中であっても改行が入り枠内に収まっています。

このword-break: normalはデフォルト値のため、特に何もしていないサイトでは

• 英単語：ボックス突き抜ける
• 日本語：ちゃんと改行されて収まっている

言語問わず単語の途中で改行はされず、単語の切れ目で改行される。つまり長い単語であればはみ出ることもある。

word-break: keep-allは言語問わず単語の途中で改行されることはないため、英語であろうが日本語でも単語は改行されず、長い単語はボックスをはみ出します。

言語問わず表示範囲に合わせて改行される。つまり単語の途中でも改行されることがある。

word-break: break-all;が設定されると言語問わずボックスの中に収まるように、単語途中であろうと強制的に改行されます。つまり禁則処理が解除され、単語のどこでも改行される形になります。
※ブラウザによっては禁則処理が残る場合もあり

word-breakのプロパティで紹介する最後の値がbreak-wordですが、上記のサンプルコードではこのプロパティと他のプロパティでの表示を比べてみました。

break-wordは、break-allのように英語・日本語の単語の途中でも改行が入っているのがわかるかと思います。また括弧の始まりが行頭に来ていることからも禁則処理としてはbreak-allより強くword-break: normalに近い性質を持っているようです。

overflow-wrap: normalは初期値で、word-break: normalと同じ挙動です。

英単語では単語の区切り位置でのみ改行されるため、長い単語はボックスを突き抜けます。日本語は単語途中でも改行され、ボックス内に収まります。

overflow-wrap: break-wordはword-break: break-wordと同じ挙動です。可能な限り禁則処理を残しつつ、英語・日本語問わずボックスに収まるように単語途中でも改行が入ります。

それでは最後の見ていきたいのがoverflow-wrapとword-breakを同時指定するとどうなるのでしょうか？

上記のサンプルコードを見る限り、overflow-wrapであろうとword-breakであろうと単語途中で改行させる値（break-word）があると、改行させるルールが強く働きボックス内に収めようと単語途中で改行が入ります。この時にword-breakでkeep-allを指定していてもoverflow-wrapでbreak-wordがある場合は効かない事になります。

一方でword-break: keep-allとoverflow-wrap: normalの組み合わせではkeep-allの方の設定も有効となり、日本語でも単語の途中で改行されずボックスをはみ出ているのが確認出来ます。

まとめるとword-breakとoverflow-wrapの組み合わせで設定しても

• いずれかで単語途中でも改行させる値（break-●●）があれば、単語途中で改行が入る
• overflow-wrap側に単語途中で改行させる値がなければ、keep-allなどword-breakのプロパティの値が有効になる