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

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

方法は2つあります。

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

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

★ 折り返す場合は

pre {
	white-space: pre-wrap;
}

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

pre {
	overflow:auto;
}

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