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

默認(rèn)情況下，<pre /> 標(biāo)簽中的內(nèi)容若超出范圍不會(huì)自動(dòng)換行，這樣無(wú)論在顯示或打印都會(huì)出現(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)容請(qǐng)參見(jiàn)：http://www.w3.org/TR/css3-text/#white-space。

pre標(biāo)簽會(huì)原樣保留HTML內(nèi)容的格式，可是如果寬度過(guò)大會(huì)把頁(yè)面撐壞，這時(shí)候需要自動(dòng)換行來(lá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)記最好加個(gè)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)容。這樣的話，代碼一長(zhǎng)就出現(xiàn)了撐到頁(yè)面外部的樣子。在之前我都是有意的在代碼里強(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)測(cè)試，除IE[當(dāng)前使用6]外, 其他可以.... 郁悶，然后增加 width:600px; 后，ok,.換行了，其實(shí)位置還是衍生出去了。樣子是這樣的：代碼是在里面了，但下面的敘述性的東西卻出了去。在說(shuō)，定義一個(gè)這個(gè)寬度也不是個(gè)好的方法，其他的不直接改這個(gè)css的方法基本沒(méi)有了。然后看上面css想到，為什么定義其他的都用 white-space 而定義 IE 的不使用呢? 又不是IE 不支持。。于是加上就可以了[翻了google的前5頁(yè), 沒(méi)找到一個(gè)改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和其他的分開(kāi)了，因?yàn)閣hite-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 ;
}