CSSでプレタグを100％レスポンシブにする方法

いくつかのCSSプロパティを追加して、HTMLプレタグを100％レスポンシブにする方法を学びましょう。

他のチュートリアルWebサイトでよく見られる問題は、長いコードスニペット（preでラップされている）です。 タグ）ページの幅をオーバーフローさせ、ページレイアウトを壊します。

これは、デフォルトでpreが原因で発生します タグにはCSSのwhite-spaceがあります プロパティをnormalに設定 、このように：

pre {
  white-space: normal;
}

この問題を修正するには、normalを変更するだけです。 pre-wrap ：

pre {
  white-space: pre-wrap;
}

これは大きな改善ですが、pre-wrapであるため、オーバーフローの問題を完全に解決することはできません。 コードの行全体（空白で区切られた1行のコード用語のコレクション）のみをアドレス指定します。

コード行の個々の単語が長すぎてページの幅を超えた場合はどうなりますか？

pre-wrapのため、レイアウトはまだ壊れています 個々の単語には対応していません。

良い例は、ディレクトリパスです。これは、長さが50文字を超える可能性があり、特にモバイルでは、多くのレイアウトには幅が広すぎます。これが私自身のコンピューターからの例です：

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

上記の行の単語間に空白がないため、 one と読み替えられます。 ブラウザによる長い単語。各単語の間にスペースで区切られている場合は、pre-wrapがあるため、問題なく折り返されます。 先ほど説明したプロパティ。しかし、それは1つの長い単語として読まれます。

この問題を修正するために、word-breakと呼ばれる別のCSSプロパティをpreタグに追加します。 、そしてそれにbreak-allの値を与えます 。このように：

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

これで、プレタグは100％レスポンシブになります。