<pre>で折り返させる方法を教えてください（firefox）

質問

表示枠に収まらない改行が入っていない長い文字列を<pre>タグで表示させると、IEでは表示枠の横幅で折り返して表示してくれるのですが、firefoxだと折り返して表示してくれません。
firefoxでも正常に折り返して表示させる方法はないでしょうか？
cssには以下のように書いています。
pre {
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}

回答No.5

doublebeefcake · ベストアンサー

書き忘れましたが、overflowプロパティにはwidthで幅を指定してやります。

div { overflow : auto ; width : 100% ;}
pre { overflow : auto ; width : 100% ;}

こんな感じです。

お礼

ありがとうございました。
ご教授いただいた方法で解決しました。

回答No.4

doublebeefcake

そもそも<pre>タグは整形済みであることを示すタグです。つまり、折り返してしまっては意味がないと思うのですが。
よって、<pre>や<code>のような折り返さないで見せた方が良い要素は、CSSのoverflowプロパティを用いて、スクロールバーを出した方がよろしいかと思います。

実装の仕方は以下の通り
▼HTMLソース
<div>
<pre>
<code>プログラムソース</code>
</pre>
</div>

▼CSSソース
div { overflow : auto ; }
pre { overflow : auto ; }

※基本的にpreのみoverflowを指定すれば良いのですが、ブラウザによって解釈が違うので、overflowは<div>に指定するのが好ましいようです。

私はこの方法で、IE,NN,FireFox,opera,Mozillaに対応しています。Mac版IEでも多分表示されるはずです。

回答No.3

345itati

複雑な書き方をしているのが少々・・？なのですが^^;
例：
<style type="text/css">
<!--
pre { white-space:normal;
width: 300px;
color:#ff0000;
background-color: #ccffff;
word-wrap: break-word;
}
-->
</style>
という単純な記述だと、
Mac Safari2.0.4、Firefox1.5.0.6、Opera7.53、Opera9.0、Netscape7.2、Camino、IE5.2.3できちんと色付き表示枠のボックス内で折り返しが入ります。
(すみません今Macでログインしてるんで・・・^^;

旧バージョンとの互換の為に複雑な記述にされているのかもしれませんが、質問者様が書かれたやり方では、Mac側のブラウザではSafariのみが折り返して表示されていますね。

回答No.2

345itati

いえ、<pre>タグはそのままで、CSS内のwhite-spaceプロパティに適用するpreの値をnormalに変えるとFirefoxでもボックス内で自動改行されるはずです。

このやり方では、不都合が出てしまいますか？

補足

たびたびありがとうございます。
以下のようにやってみたのですが、やはりfirefoxでは自動改行されませんでした。
pre {
white-space: -moz-normal-wrap; /* Mozilla */
white-space: -normal-wrap; /* Opera 4-6 */
white-space: -o-normal-wrap; /* Opera 7 */
white-space: normal-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}

回答No.1

345itati

そもそもwhite-spaceプロパティは、ブラウザによって対応が違うので、IEが正常でFirefoxがおかしいという事ではありませんが・・・・^^;

後、W3C標準と互換で表示が変わります。
記述をぱっと見た感じでは互換モードでIEがpreの値が適用されている時にうまく表示出来ない不具合を正常と勘違いされている感じがします。

preの代わりにnormalを適用すればFirefoxでもボックス内で折り返してくるはずですが。

補足

ご回答ありがとうございます。
>preの代わりにnormalを適用すればFirefoxでもボックス内で折り返してくるはずですが。
説明不足でした。すみません。
<pre>を使いたい理由は、<textarea>で入力した内容を改行も含めてそのまま表示したかったからなのです。改行コードを<br>に変換すればいいのですが、タグを入力された場合は、内部処理でタグを無効にしているので、その方法も使えないという状況なのです^_^;