【CSS】長い英語テキストやURLを折り返しする

長い英語のテキストやURLを適切に折り返す方法。
CSSのword-breakまたはoverflow-wrap（word-wrap）プロパティを使用いたします。

.wrap-words {
  word-break: break-all; /* 単語の途中でも折り返しを許可 */
  /* または、以下のように書くこともできます */
  /* overflow-wrap: break-word; */
}

【メモ】word-breakとoverflow-wrap（word-wrap）の違い

word-breakとoverflow-wrap（word-wrap）は、CSSでテキストの改行や折り返しに関するプロパティですが、若干異なる機能を持っています。

●word-break

word-breakプロパティは、テキスト内の単語の途中での改行方法を指定します。

・normal：ブラウザが通常の規則に従って改行します。単語の途中で改行は行いません。
・break-all：単語の途中でも強制的に改行します。長いURLなど、単語が画面に収まらない場合に役立ちます。

●overflow-wrap（word-wrap）

overflow-wrapプロパティ（以前はword-wrapとも呼ばれていました）は、行がコンテナボックスからはみ出た際の挙動を指定します。

・normal：ブラウザが通常の規則に従って、単語の途中での折り返しを行います。
・break-word：単語の途中でも折り返しを行います。これにより、長い単語がコンテナからはみ出るのを防ぎます。

主な違い

・word-break：主に単語の途中での改行方法を制御します。break-allを使用すると、単語の途中でも改行することができますが、これは単語の意味を無視して強制的に改行する場合があります。

・overflow-wrap：主にテキストがコンテナからはみ出た際の挙動を制御します。break-wordを使用すると、単語の途中でも折り返しを行うことができますが、単語の意味を保ちつつ改行することができます。

word-breakとoverflow-wrap（word-wrap）の違い例

・word-break、overflow-wrap（word-wrap）を指定しない場合

※表示崩れを防ぐため画像掲載

・word-break: break-all; の場合

word-break: break-all;を使用すると、長いテキストの途中で強制的に改行が挿入されます。単語の意味を無視して、単語の途中でも改行が行われます。

・overflow-wrap: break-word; の場合

一方、overflow-wrap: break-word;を使用すると、単語の途中でも改行が行われますが、単語の意味を尊重して改行されます（上記例では「?」で改行）。長い単語がコンテナからはみ出るのを防ぎながら、意味を保ったまま改行します。