讓 <pre /> 標簽中的內容自動換行并符合 W3C 標準（多瀏覽器支持）

默認情況下，<pre /> 標簽中的內容若超出范圍不會自動換行，這樣無論在顯示或打印都會出現麻煩。

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

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

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

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;
}
父標記最好加個DIV,并設置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 格式輸出 代碼。 而瀏覽器默認是強制不換行輸出 pre 里的內容。這樣的話，代碼一長就出現了撐到頁面外部的樣子。在之前我都是有意的在代碼里強制換行... 累啊. 今天有意的google了下，找到了：
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

經測試，除IE[當前使用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 ;
}