CSS: preタグやcodeタグの内容がはみ出さないようにする方法

HTMLでpreタグやcodeタグで記述していて、内容がはみ出る場合があります。 そんな時はスタイルシートで設定してあげればすぐに解決できます。

方法は2つあります。

  • 折り返す
  • スクロールを表示する

以下ではpreタグを前提としてコードを紹介します。

★ 折り返す場合は

pre {
	white-space: pre-wrap;
}

この場合はpreタグやcodeタグの内容が、 画面幅に合わせて折り返して表示されます。

★ スクロールを表示する場合は

pre {
	overflow:auto;
}

この場合は画面幅に関係なく、 preタグやcodeタグの内容が折り返されることなく スクロールで移動させて見ることになります。

どちらが良いかは好みの問題ですのでお好きな方を 設定してください。

HTML・CSS入門