CSS: preタグやcodeタグの内容がはみ出さないようにする方法
HTMLでpreタグやcodeタグで記述していて、内容がはみ出る場合があります。 そんな時は、スタイルシートで設定してあげればすぐに解決できます。
方法は2つあります。
- 折り返す
- スクロールを表示する
以下ではpreタグを前提としてコードを紹介します。
★ 折り返す場合は
pre {
white-space: pre-wrap;
}
★ スクロールを表示する場合は
pre {
overflow:auto;
}
どちらが良いかは好みの問題ですのでお好きな方を 設定してください。