【実務・中級編】word-breakとoverflow-wrapによる単語の折り返し – HTML実践ガイド

なぜ、その「長い英単語」はレイアウトを破壊するのか？：`word-break` と `overflow-wrap` の正しい使い分け

フロントエンドの現場で、一度は頭を抱えたことがあるはずです。動的に生成されるユーザー名、やたらと長いURL、あるいは技術ブログで引用したソースコードの定数名。これらがインライン要素からはみ出し、せっかく組んだ美しいグリッドレイアウトを無残に破壊していく……。

「とりあえず `word-break: break-all;` を当てておけば解決だろ？」

もしあなたがそう考えているなら、少しだけ立ち止まってください。その安易な実装が、実は「読む人にとっての優しさ」を奪っている可能性があるからです。今日は、中級エンジニアなら押さえておくべき、テキストの折り返しに関する「解像度」の話をしましょう。

—

1. 裏側で何が起きているのか？ブラウザの「折り返し」アルゴリズム

ブラウザのレンダリングエンジンは、基本的には「単語単位（空白や改行コード）」でテキストを扱います。しかし、親要素の幅を突き抜けるような長い文字列に遭遇したとき、彼らはパニックに陥ります。「単語をぶった切るべきか、それとも親をはみ出してでも単語の完全性を守るべきか」と。

ここで登場するのが `word-break` と `overflow-wrap` です。この二つ、似ているようで「何を守りたいか」という哲学が全く違います。

`overflow-wrap` (旧 `word-wrap`): 「単語の繋がりを尊重する」のが基本姿勢です。単語の途中で改行したくないが、どうにもならない時だけ泣く泣く切り刻む、という保守的な挙動をとります。
`word-break`: 「行の埋まり具合を尊重する」のが基本姿勢です。単語の途中で切れることを厭わず、とにかく指定された幅の中に効率よく文字を詰め込もうとする攻撃的な挙動をとります。

—

2. 実務で選ぶべき「ベストプラクティス」

結論から言えば、一般的なテキストコンテンツにおいて、我々が目指すべきは「可能な限り単語を維持しつつ、崩れを防ぐ」というバランスです。

推奨設定（コピペ用）

.text-container {
/ 基本は単語単位で折り返す /
overflow-wrap: break-word;

/ 念のため、はみ出しを確実に防ぐ（単語の途中でも切る） /
word-wrap: break-word;

/
word-break: break-all は、本当に「禁忌」に近い存在。
日本語と英語が混在する環境で使うと、意図しないところで
単語がぶった切られ、可読性が著しく低下します。
どうしても必要な場合以外は避けるのが賢明です。
/
}

—

3. ケーススタディ：コードブロックとURL

例えば、`` 要素内で長いクラス名や関数名を表示したい場合、`break-all` を使うと絶望的に読みづらくなります。


/ ソースコード表示用 /

.code-block {

  /

    単語の途中で強引に改行されると、エンジニアはコードを写経する際に

    混乱します。オーバーフローを許容して横スクロールさせるか、

    あるいは以下のように最小限の制御に留めるべきです。

  /

  overflow-wrap: anywhere;

}
`anywhere` は `break-word` に似ていますが、より「親要素の最小幅」を考慮して計算してくれる、現代的なプロパティです。ブラウザの進化とともに、我々の選択肢も少しずつ柔軟になっているわけです。
---
4. 最後に：エンジニアとしての「美学」を忘れない
技術的な仕様を知ることは重要ですが、それ以上に大切なのは「ユーザーがどう読むか」という視点です。

`break-all` は諸刃の剣：URLやメールアドレスのような「単語の意味が重要なもの」に対して使うと、コピー＆ペーストの妨げになることがあります。
`overflow-wrap: break-word` はプロの嗜み：自然な改行を促すため、文章が格段に読みやすくなります。

現場で「レイアウトが崩れた！」と焦ったときこそ、`word-break: break-all` に飛びつく前に、まずは `overflow-wrap` があなたの意図を叶えてくれないか検討してみてください。その一手間のこだわりが、あなたのコードを「動くもの」から「信頼できるもの」へと変えていくはずです。
さて、今日の実装に戻りましょうか。あなたの書くテキストが、美しく折り返されることを願っています。