有時候顯示過長的程式碼時，在 IE 上面會很討厭地把我們的版面撐開，造成 CSS 版型顯示不正確。不過我一直執著於標準化的方式，而忽略掉一些方法。它們雖然都不能夠有效地完整解決這個問題，至少對 IE 而言已經足夠了。

利用以下的 CSS 屬性，能讓已經預先格式化的文字在視窗的邊緣換行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style type="text/css">
/*<![CDATA[*/
.precode {
display: block;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: pre-wrap; /* CSS 2.1 */
}
/*]]>*/
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
.precode {
white-space: pre; /* CSS2 */
word-wrap: break-word; /* IE */
}
/*]]>*/
</style>

說明如下：

• word-wrap: break-word; - 視窗邊界換行，僅 IE 支援。也可以用 word-brak: break-all; 但不會保持英文單字的完整性。
• white-space: pre; - 對某標籤作預先格式化，所有標準瀏覽器皆支援。
• white-space: -moz-pre-wrap; - 預先格式化，但在元素邊界換行，僅 Mozilla (Firefox) 支援。
• white-space: pre-wrap; - 預先格式化，但在元素邊界換行，僅 Opera 支援。

這次用的方法雖然不標準，且瀏覽器的支援性不足，但至少能讓我們的版型能在多數狀況下能夠順利被呈現。

註：也可以參考這篇：Whitespace and generated content (目前 Firefox 觀看會不正常)。