[Web] preタグソースコードを掲載する際に、はみ出ないようにするCSSの設定

今日はスゴくライトなネタです(*´∇｀*)
ソースコードをブログに掲載する際に、preタグを利用した際に、 １行が長いと、横にはみ出すことがあると思います。
今日は、それを防ぐ為のCSSを紹介したいと思います。

preタグ内で折り返すCSS

preタグに以下のCSSを適用する事で、preタグのボックス内で自動的に改行されるようになります。

pre {
    white-space: pre-wrap;         /* CSS3 */
    white-space: -moz-pre-wrap;    /* Firefox */
    white-space: -webkit-pre-wrap; /* Chrome, Safari */
    white-space: -o-pre-wrap;      /* Opera 7 */
    word-wrap: break-word;         /* IE 5.5+ */
}

最近は、Firefox, Chrome, Safari, Operaともにバージョンが上がり、pre-wrapが使えるようになっています。
ベンダープレフィックス（-oとか-mozとか）は、念のためにつけてるくらいです。

最後に

こーゆう便利なCSSをたくさん知っているのと知っていないのは、大きな差が生まれるのかなと思います。
今回は、YoheiM.NETで公開するソースコードがはみ出て困って調べていたら、この解にたどり着きました。
また便利なものが見つかったらブログに書きたいと思います。 最後までお読み頂きましてありがとうございました(*ﾟ▽ﾟ)ﾉ