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