preタグ内に記述したコードがそのままだと上手く改行されずボックスからはみ出してしまう問題に対処するCSS。

これまで使用していたcss

[ CSS ] pre でも改行を生かしたまま折り返す

pre {
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
}

これまでは、上記サイトで解説されているコードをそのまま使っていました。すごく役に立つcssで、大変助かりました。

変更後のcss

firefoxもoperaも、比較的新しいバージョンでは「pre-wrap」が問題なく使えますから、余計な行は削除します。firefoxやoperaをわざわざインストールしてる人は、きちんとバージョンアップしてるはず！てか、しててほしいと切に願う！そして「pre-wrap」非対応の古いブラウザへの配慮として、ボックスからはみ出す時はスクロールバーが出るようにしておきます。

pre {
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

とりあえず、これで十分でしょう。