CSSの2行追加でpreタグを100%レスポンシブにする方法

CSSプロパティをほんの数行追加するだけで、HTMLのpreタグで囲まれたコードスニペットを100%レスポンシブにする方法を解説します。

長いコードがレイアウトを崩す問題

チュートリアルサイトなどでよく見かける問題のひとつが、preタグで囲まれた長いコードスニペットがページの幅からはみ出し、レイアウト全体が崩れてしまうというものです。

この原因は、デフォルトではpreタグのCSSプロパティwhite-spaceがnormalに設定されていることにあります。

pre {
  white-space: normal;
}

white-space: pre-wrapで行の折り返しに対応

この問題を解決するには、値をnormalからpre-wrapに変更するだけです。

pre {
  white-space: pre-wrap;
}

これだけでもかなり改善されますが、実はオーバーフローの問題は完全には解決しません。pre-wrapが折り返しの対象とするのは「行全体」、つまり空白で区切られたコードのまとまりだけだからです。

では、行内の個々の単語が長すぎてページ幅を超えてしまった場合はどうなるでしょうか。その場合もレイアウトは崩れたままです。pre-wrapは個々の単語の折り返しには対応していないためです。

word-break: break-allで長い単語にも対応

わかりやすい例がディレクトリパスです。パスは簡単に50文字を超えてしまい、多くのレイアウト、特にモバイル環境では幅が足りなくなります。実際の例を見てみましょう。

cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.md

上の行には単語間に空白がないため、ブラウザはこれを1つの長い単語として認識します。もし各単語がスペースで区切られていれば、先ほどのpre-wrapプロパティのおかげで正しく折り返されます。しかし、空白がない場合は1つの長い単語として扱われてしまうのです。

この問題を解決するには、preタグにもうひとつword-breakというCSSプロパティを追加し、値をbreak-allに設定します。

pre {
  white-space: pre-wrap;
  word-break: break-all;
}

これで、どのような長いコードが入ってもpreタグが画面幅に合わせて折り返され、レイアウトが崩れることはありません。preタグが100%レスポンシブになりました。