2021-09-10

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

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

方法は2つあります。

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

★ 折り返す場合は

pre {
	white-space: pre-wrap;
}

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

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

pre {
	overflow:auto;
}

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

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