URLや英数字の長文を途中で改行させる方法

Webページを作成する際の文章には、URLなど英数字の文字列を掲載する場合もあります。通常、文章はボックスの端までいくと自動的に改行されて表示されます。しかし、英数字が長く続く状態で端まで到達しても自動で改行されずに、そのままボックスをはみ出して表示されてしまいます。自動改行されない理由としては、英語には単語の途中で改行しないという禁則処理が適用されることにあります。そのために、ボックスや画面から文字がはみ出して横にスクロールしなければ、見ることができない状況になってしまいます。
横にスクロールしなければ閲覧できないというのは、ユーザーにとっては不便なことでユーザビリティもよくないでしょう。そこで、ボックスや画面から文字がはみ出さないようにする方法を紹介します。

CSSで長い英数字を途中で折り返す

長い英数字もCSSを利用すれば、単語の途中で折り返すことができます。

word-wrapプロパティを使う

word-wrapプロパティは表示領域内で1行で収まらない場合の改行方法を指定するプロパティです。

p {
  word-wrap: break-word;
}

このように「break-word」を指定すると、途中で改行をしないと表示領域からはみ出してしまう場合に限って、通常の禁則処理を可能な限り維持しつつ、単語を分割して自動的に改行が入るようになります。
ちなみに、CSS3では「word-wrap」は「overflow-wrap」という名称に変更されています。

word-breakプロパティを使う

word-breakプロパティは改行に関する禁則処理を指定する場合に使用されます。

p {
  word-break: break-all;
}

このように「break-all」を指定すると、すべての禁則処理が無効になります。それにより長い英数字の文字列でも途中で改行されるようになります。しかし、word-breakプロパティを使って改行指定をすると、場合によっては和文で行の先頭が句読点で始まったり英文でも1つの単語の途中で改行が入ったりして変な文章になってしまう場合もあるので注意が必要です。

このようなプロパティを使っても改行しない場合は、ボックスに対して、widthなど幅に関するプロパティを指定してあげるとボックスからはみ出さず、うまく改行されると思います。