2012/04/15更新

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

このエントリーをはてなブックマークに追加            

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

CSS3のイメージ



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で公開するソースコードがはみ出て困って調べていたら、この解にたどり着きました。
また便利なものが見つかったらブログに書きたいと思います。 最後までお読み頂きましてありがとうございました(*゚▽゚)ノ






こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。