【CSS】URLが改行されずテーブルがはみ出す！word-breakとoverflow-wrapで解決

今回は、この厄介なレイアウト崩れの原因と、CSSを使ったスマートな解決方法について詳しく解説します。

なぜURLは改行されず、レイアウトが崩れるのか？

この問題の根本的な原因は、ブラウザの「単語」に対する扱いにあります。

ブラウザは、文章を改行する際、基本的には単語の区切り（スペースなど）で行います。しかし、URLや長い英単語・ファイル名など、スペースを含まない長い文字列は「ひとかたまりの長い単語」として認識されてしまいます。

そのため、その「単語」がコンテナ（親要素）の幅を超えても、ブラウザは自動で改行できず、結果として親要素を無理やり押し広げてレイアウトが崩れてしまうのです。

なぜテーブルで特に目立つのか？

この現象は、テーブルのセル（<td>）だけでなく、幅が狭いカラム（<div>）などでも発生します。しかし、テーブルで特に問題が目立ちやすいのには理由があります。

テーブルの一つのセルでも中身がはみ出すと、そのセルだけでなく列全体が引き伸ばされ、テーブル全体の構造に大きく影響を与えてしまうため、レイアウト崩れがより顕著に現れるのです。

解決策：CSSで改行ルールを指定する

この問題を解決するには、CSSで「単語の途中でも改行していいよ」というルールを指定してあげる必要があります。そのためのプロパティが主に2種類あります。

1. word-break
2. overflow-wrap (旧 word-wrap)

それぞれの特徴と使い方を見ていきましょう。

強制的に改行させる word-break: break-all;

word-breakは、単語の途中での改行ルールを細かく指定するプロパティです。
中でもbreak-allという値は、単語の途中であろうと、はみ出しそうになったら強制的に文字を改行させます。

CSSの記述例

td {
word-break: break-all;
}

• 長所: URLのような長い文字列に対して非常に効果的で、確実にレイアウト崩れを防ぎます。
• 短所: 日本語の文章や英単語に対しても容赦なく適用されるため、「東京都」が「東
  
  京都」のように不自然な位置で改行され、可読性を損なう可能性があります。

はみ出す時だけ改行させる overflow-wrap: break-word;

overflow-wrapは、その名の通り、要素がコンテナからはみ出す（オーバーフローする）のを防ぐためのプロパティです。 break-wordという値を指定すると、単語の区切りで改行できない長い単語が、はみ出す場合に限り、その単語の途中で改行させます。

CSSの記述例

td {
    overflow-wrap: break-word;
}

• 長所: word-break: break-all; よりも自然な改行を維持しやすく、通常の文章への影響が少ないため、より安全な選択肢と言えます。
• 短所: 非常に複雑なレイアウトの場合、意図通りに機能しない可能性もゼロではありません。

サイト全体に word-break を適用しても良い？

「毎回指定するのは面倒だから、サイト全体にword-break: break-all;を適用すればいいのでは？」と考える方もいるかもしれません。

しかし、これはあまりおすすめできません。 前述の通り、word-break: break-all;をサイト全体（例: bodyタグ）に適用すると、日本語の文章が不自然な箇所で区切られてしまい、サイト全体の可読性を大きく損なうリスクがあるからです。

おすすめの実装方法：全体に「優しい設定」、部分的に「強い設定」

最もバランスの取れたおすすめの方法は、2段階のアプローチです。

1. サイト全体には、安全な overflow-wrap を適用する。 これで、予期せぬ場所でのレイアウト崩れをある程度防げます。
2. URLなど問題が起きやすいテーブルセルなどには、より強力な word-break を適用する。 これで、問題が頻発する箇所をピンポイントで、かつ確実に解決できます。

実装例

/* --- レイアウト崩れ防止のための基本設定 --- */

/* サイト全体：はみ出す場合のみ、単語の途中で改行させる（比較的安全な設定） */
body {
    overflow-wrap: break-word;
}

/* テーブルセル：URLなど長文を強制的に改行させる（より強力な設定） */
td,
th {
    word-break: break-all;
}

このコードをWordPressの「外観」>「カスタマイズ」>「追加CSS」に記述することで、サイト全体の可読性を保ちつつ、テーブルのはみ出し問題を解決できます。

まとめ

ぜひ、このテクニックを活用して、どんなデバイスでも美しいレスポンシブサイトを目指してください。