[CSS] 本文の長いURLがはみ出すのを overflow-wrap で直す

WordPress から移行した記事に、リンクテキストが長い URL そのままの箇所がいくつかあって、本文の幅をはみ出して横に伸びていました。スマホだと特に崩れます。

[https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A7%E3%83%AB...](...)

原因

URL のようなスペースを含まない長い連続文字列は、デフォルトでは途中で改行されません。通常の文章は単語の隙間（スペース）で折り返せますが、URL には折り返せる隙間が無いので、コンテナを突き抜けてしまいます。

直し方：overflow-wrap

折り返せる隙間が無いときでも、必要なら単語の途中で改行させるのが overflow-wrap です。本文（このブログでは .prose）とリンクに指定します。

.prose {
  overflow-wrap: break-word;
}

.prose a {
  /* 長いURLなど、改行位置が無い文字列も折り返す */
  overflow-wrap: anywhere;
}

break-word と anywhere の違い

• break-word … その長い1語を入れると溢れる場合に限り、途中で改行する
• anywhere … 同様に途中改行するが、最小幅の計算にもこの改行を考慮する

違いが出るのは、たとえば狭い flex / grid やテーブルセルの中。anywhere の方が「コンテナを縮められる」ので URL の溢れには効きやすいです。一方で、レイアウトの最小幅に影響するので、本文全体には穏やかな break-word、リンクなど溢れがちな要素に anywhere、と使い分けると安定しました。

似たプロパティに word-break: break-all もありますが、これは英単語まで容赦なくどこでも切るので、英文が読みにくくなりがち。URL対策には overflow-wrap の方が無難です。

結果

CSS を2行足すだけで、全記事の長い URL が枠内で折り返されるようになりました。記事ごとに本文を直さなくて済むのが楽です（リンクテキスト自体を読みやすく整える話は別途やりましたが、はみ出し対策はこれで十分）。