てるてるブログ

てるてるぼうずの日常やらお勉強やら

CSS – preタグ内で改行

Posted on | 12月 20, 2011 | No Comments

ソースコード表示使ってるSyntax Highlighter。
pre要素内にコードを記述して行くんだけど、preタグの仕様だかなんだかで一行内の文字数が長いと要素内で折り返されずに横スクロールバーが出てきてしまう。
ソースコードとか結構長いのでやたらと横スクロールバーばかり…

そんな感じでどうにかならないかと探していたらCSSで折り返しが指定出来るらしいとの記事発見。

FC2ブログでの、<pre>タグの自動折り返し(自動改行)

とりあえずコードは↓

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

ブラウザ毎に結構ぶれるみたいですね。


対応ブラウザも増えたとかで、短縮版(?)の↓でもいけるようです。

pre{
    /* IE用 */  
    word-wrap: break-word;  
    /* その他 */  
    white-space: pre-wrap; 
}

横スクロールしてもコードは1行の方がいい!って人もいるかもですけどね。

スタイルシート スタイルブック
有坂 陽子, 長谷川 恭久
トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin