# プログラミング全般＞ウェブサイト制作・運営

preタグで文字を端っこで折り返す

プログラムのソースコードを、ブログ上に表示するために、<pre>タグを使おうと思ったのですが、一つ問題が・・・

ソースコードの一行の長さが長すぎると、端っこで折り返されずに、右側メニューのほうまで、がーっとはみ出てメニュー部に重なって表示されてしまう。

で、ちょっと調べてみたら、良いページを見つけました。

PREで自動改行する方法

以下をスタイルシートに書き込めば、PRE内でも自動改行してくれる。

pre {
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}

上から順に、ブラウザごとのCSS記述。
このブログのスタイルシートにも、以下のように記述してみました。

pre
{
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳＰゴシック’,sans-serif;
margin:20px;
padding:10px;
background-color:#F3F3F3;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}

ただ、これでも問題が一つ・・・
スペースが一つも含まれていない行の場合、FireFoxで表示したときに、行が折り返されずに一行となってしまうのです。（Windows XP＋FireFox2.0の場合）

以下、<pre></pre>で、囲ってある部分の例です。
FireFoxで見ると、一行目(1)のhogehogehogehoge・・・だけ折り返されずに表示されてしまいます。

1:hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
2:hoge and space hoge and space hoge and space hoge and space hoge and space hoge and space hoge and space
3:hoge　and　zenkaku_space　hoge　and　zenkaku_space　hoge　and　zenkaku_space　hoge　and　zenkaku_space

スペースが一つも含まれていない行の、FireFox対策は、今のところどうしようもない。
一行が長くなる場合は、半角スペースを行に含めるようにしよう。

>> 次の記事 : ソーシャルブックマークで注目されるためのまとめ

<< 前の記事 : OpenPNEの新規登録時の処理