如何讓pre標籤自動換行？

讓

標籤中的內容自動換行並符合W3C 標準（多重瀏覽器支援）

預設情況下，

標籤中的內容若超出範圍不會自動換行，這樣無論在顯示或列印都會出現麻煩。

下面提供符合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;
}

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

Wrapping the pre tagMaking 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 裡的內容。這樣的話，程式碼一長就出現了撐到頁面外部的樣子。在之前我都是有意的在程式碼裡強制換行... 累啊. 今天有意的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 ;      
}

以上是如何讓pre標籤自動換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！