讓 <pre /> 標(biāo)簽中的內(nèi)容自動換行并符合 W3C 標(biāo)準(zhǔn)（多瀏覽器支持）

默認(rèn)情況下，<pre /> 標(biāo)簽中的內(nèi)容若超出范圍不會自動換行，這樣無論在顯示或打印都會出現(xiàn)麻煩。

下面提供符合 W3C 標(biāo)準(zhǔn)并支持多瀏覽器的 CSS 樣式代碼：
pre{
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

更多內(nèi)容請參見：http://www.w3.org/TR/css3-text/#white-space。

pre標(biāo)簽會原樣保留HTML內(nèi)容的格式，可是如果寬度過大會把頁面撐壞，這時候需要自動換行來幫忙：

Wrapping the pre tag
Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap:

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
父標(biāo)記最好加個DIV,并設(shè)置CSS屬性：word-wrap: break-word;white-space : normal；
直接使用style寫法：

<pre style="width:30px;word-break: break-all; word-wrap:break-word;border:1px solid #555">
asfasdfas
dfasd
fa
sdfasdf
</pre>

本站文章中使用了 pre 格式輸出 代碼。 而瀏覽器默認(rèn)是強(qiáng)制不換行輸出 pre 里的內(nèi)容。這樣的話，代碼一長就出現(xiàn)了撐到頁面外部的樣子。在之前我都是有意的在代碼里強(qiáng)制換行... 累啊. 今天有意的google了下，找到了：
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

經(jīng)測試，除IE[當(dāng)前使用6]外, 其他可以.... 郁悶，然后增加 width:600px; 后，ok,.換行了，其實位置還是衍生出去了。樣子是這樣的：代碼是在里面了，但下面的敘述性的東西卻出了去。在說，定義一個這個寬度也不是個好的方法，其他的不直接改這個css的方法基本沒有了。然后看上面css想到，為什么定義其他的都用 white-space 而定義 IE 的不使用呢? 又不是IE 不支持。。于是加上就可以了[翻了google的前5頁, 沒找到一個改css解決的...汗]。
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space : normal ;
}

至于本站上使用的是把ie和其他的分開了，因為white-space 在最后也都作用于其他了....
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
}

* html pre {
word-wrap: break-word;
white-space : normal ;
}