長い英数字の表示と改行ルールについて、
CSSプロパティのoverflow-wrapとword-breakの違い

英語サイトを制作する機会というのはなかなかありませんが、日本向けのサイトであっても、英語表記や何かしらの英単語を続けて使ってサイトやページを作る機会というのは少なからず存在します。

そんな時に、なぜか日本語なら自動で改行されるのに、英語だとボックスの端に差し掛かっても改行されずに外にはみ出てしまうというケースが少なからずあります。

今回はそんな英文字がボックスの端で改行されずにはみ出て表示されてしまう対策についてまとめてみました。とはいえ、とてもシンプルで呪文のようにコードをdefault.cssなどに入れておく感じになるのでおさらいがてら見ていきましょう。

英文字が改行されずにはみ出るサンプル

実際に英語系で何かをしないとそういうシーンに遭遇はしないため、もしかしたらコーディングをしている方でも知らないという方もいるかもしれませんが、英字だとはみ出るというのは下記のような事を言います。

実際にこれはHTMLとCSSで書いたサンプルのデモですが、日本語のテキストなら問題なく表示されていますが、英字だと指定したサイズの枠線からはみ出て表示されてしまっています。（PCのみでスマホでははみ出ない設定にしています）

このように半角スペースなどが入れば改行がされるのですが、そういった類が無ければ改行はされずにボックスからはみ出て表示されてしまいます。

そもそもの文字表示の仕方について

日本人からすると日本語が当たり前ですが、世界には様々な言語がありそれに応じて処理の仕方なども変わってきます。基本的なCSS上での表示のルールとしてはデフォルト状態ですと

• 日本語の場合：単語の途中であっても自動で改行される
• 英数字（適当なスペース無し）：改行されずにはみ出て表示される
• 英数字（適当なスペースあり）：スペースに合わせて自動で改行される

というルールになっています。
注意すべきは、2個目のスペースが無い英数字の場合は改行されずにはみ出てしまうという点です。

そんなシーンほとんどないでしょ？と思うかもしれませんが、実は通常のサイト制作などでも意外とあったりします。

例えば、flexなどを使って横並びにしたレイアウトになれば、1つ1つの横幅は狭くなりがちで、そんな時に英文字で何かを表記することがあれば、単語などや見せ方などによっては長くなってボックスからはみ出てしまうといった事もあり得ます。

CSSで英数字の折り返しを制御するプロパティ

ではそんな英数字を制御するにはどうすれば良いかとなるのですが、当然CSSにもそれらを制御するためのものが用意されています。しかしながらここがややこしいところで、同じような似た設定が3つも存在しています。

• word-wrap
• overflow-wrap
• word-break

この3つがそのプロパティに当たりますが、実際には2種と考えて問題ありません。

word-wrapとoverflow-wrapについて

実はこのword-wrapとoverflow-wrapは互換性があるものになります。
もともと、この折り返しについてはMicrosoftが独自の拡張プロパティとしてword-wrapを用意していたのですが、それが独自ではなく標準化されることになり、合わせて改名されてoverflow-wrapへと変わった経緯があります。

そのため、word-wrapとoverflow-wrapは同じような扱い・同義で捉えられることは多いのですが、今ではoverflow-wrapを使う事がメインとなっていますがword-wrapを利用する事も可能で、旧ブラウザへの対応などをする際にはword-wrapの方が良いというケースもあります。

ただ一応メインとしてはoverflow-wrapが今の標準化のためこちらを基準として考えて行くのが良いかと思います。

overflow-wrapとword-breakの違い

それぞれの細かな設定については後述しますが、まずこの2つの大きな違いを見ておくと、

• overflow-wrap：ボックスからはみ出た部分をどう処理するかを決める
• word-break：はみ出る部分を改行するかそのままはみ出すかを決める

という事で非常に似ているものの厳密には異なります。
はみ出たテキストをどう処理するかというのと、ボックスからはみ出る部分をどう処理するかといった違いになります。

と言うことで、それぞれのプロパティについて詳細を見ていきましょう。

overflow-wrap（word-wrap）について

先ほども書いたように、overflow-wrapはボックスからはみ出るテキストを、単語ベースで改行するかどうかを設定するプロパティになります。

可能な設定プロパティとしては2種類で

• normal：デフォルトの既定値で、空白などで改行が入る
• break-word：ボックス内におさまるよう単語の途中で改行

になります。

overflow-wrap: normal;

こちらが規定値で、単語の区切り位置でのみ改行されます。
そのため、最初のデモのように長い英数字が続くとそのままボックスを突き抜けます。

ただし、日本語は単語途中であっても改行され、ボックス内に収まります。

overflow-wrap: break-word;

こちらを設定すると、ボックスを超える英数字の場合は、ボックス内に収まるように単語の途中であっても自動改行が入ります。また、スペースが入る短い英数字の場合であれば、単語の切れ目で自動改行が入ります。

日本語に関しては規定値と変わらず、単語の途中で自動改行されます。

word-breakについて

次にword-breakについて見ていきましょう。
こちらはボックスからテキストがはみ出る場合に、そのボックスで改行するかを設定するプロパティになり、設定できるプロパティは3種類あります。

• normal：デフォルトの既定値で、空白などで改行が入る
• keep-all：特定のルール内でのみ改行。単語の途中で改行は入らない
• break-all：ボックスで収まるように単語の途中であっても自動改行

これら以外にも、break-wordという値もありますが、こちらは非推奨になっているので実質上記3つから選ぶ形になってきます。

word-break: normal;

こちらが規定値で、単語の区切り位置でのみ改行されます。
そのため、最初のデモのように長い英数字が続くとそのままボックスを突き抜けます。

ただし、日本語は単語途中であっても改行され、ボックス内に収まります。

word-break: break-all;

こちらを設定すると、ボックスを超える英数字の場合は、範囲に収まるように単語の途中であっても自動改行が入り、スペースが入る短い英数字の場合は、単語の切れ目で自動改行が入ります。

word-break: keep-all;

一番ややこしく感じるのがこのkeep-allになり、改行される文字があるかないかが基準になり、改行される文字が無ければずっと文字がボックスの外にまで続いて表示されます。

改行される文字があった場合、その次の改行される文字までの文字列がボックス内におさまるなら改行せず表示し、おさまらないなら改行して表示するというルールになっています。

改行するルールとしては下記になります。

• 英数字：「?」「-（ハイフン）」「空白（スペース）」
• 日本語：「、。（句読点）」「？（全角）」「ー（全角ハイフン）」「空白（全角スペース）」

上記の様に、かなり細かな改行されるルールが決まっていて、多くの場合使ったとしても意図してた見え方、改行される位置が異なるというケースが多いのでは無いかと思います。特に日本語でも改行ルールがガラッと変わるので使う場合は要注意です。

結局どれを使うのが良いのか

結局のところどれを使うかですが、あくまでも個人的な意見にはなりますが好みでしかないと言えます。

ただ、word-break: keep-all;を使う場合は想定外の見え方をすることがあるので個人的にはあまりおすすめしませんし、実際に自分が実務でkeep-allを指定したことは記憶の限りでは1度もないように思います。

keep-allを指定しなければ、日本語の改行は特にそこまで気にしなくても勝手にボックス内で自動改行をしてくれるので、あとは英語表記などをする際にどういう改行がされるのが良いかで選ぶことになります。

個人的にはword-break: break-all;を基準に使うようにしています。

まとめ

英数字における改行とそれに伴うCSSのプロパティでもあるoverflow-wrapとword-breakについてまとめてみました。

設定しなくても大丈夫じゃないかと思う方もいるかもしれませんが、意外と最近のサイト制作では、日本語×英語表記といった見せ方をする事も多くなり、見出しなどワンポイントで強調したい時には英語表記を使う事もあります。

また、英数字で一番使われるであろう、URLの記載などの場合、特にURLが長くなってしまう場合だとどうしてもレイアウトなどによってはボックス枠からはみ出るほどの長さになってしまう事もあります。

そういった時に、どう設定すればどう改行するのかなどをしっかり理解した上でどの設定を使って行くのが良いかというのを身に付けておくようにしたいですね。

とはいえ、個人的には究極のところ*の全設定にword-break: break-all;を設定すればほとんどのケースで対応できるのでは？と思わなくもないです。