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記述。
このブログのスタイルシートにも、以下のように記述してみました。

ただ、これでも問題が一つ・・・
スペースが一つも含まれていない行の場合、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対策は、今のところどうしようもない。
一行が長くなる場合は、半角スペースを行に含めるようにしよう。

■この記事のトラックバックURL:
http://www.mapee.jp/mpe334/mt-tb.cgi/112