武林網(www.survivalescaperooms.com)文章簡介：IE6,7下實現white-space:pre-wrap;

HTML 的空白符處理規則

HTML 中的“空白符”包括空格 (space)、制表符 (tab)、換行符 (CR/LF) 三種。

我們知道，在默認情況下，HTML 源碼中的空白符均被顯示為空格，并且連續的多個空白符會被視為一個，或者說，連續的多個空白符會被合并。

然而在有些時候，我們希望 HTML 源碼中的多個連續空格在網頁瀏覽器中可以真實地呈現，或者需要源碼中的換行符能起到真正的換行作用。于是，我們發現了 <pre> 標簽，它可以真實還原它內部文本的空白符的真實情況。

于是我們經常會把一段表示計算機代碼的文本放進 <pre> 標簽中，它們在瀏覽器中會表現出自身的空格縮進和換行效果，而不需要我們增加額外的樣式和標簽來控制它的縮進和換行。

隨著對 CSS 的了解不斷深入，我們發現，原來這一切都是 white-space 屬性在安排。<pre> 元素之所以如此神奇，是因為它自身具有 {white-space: pre;} 這一默認樣式。

white-space 屬性

CSS 中的 white-space 屬性用于設置文本空白符的處理規則，這其中包括：是否合并空白符、是否保留換行符、是否允許自動換行。各屬性值的不同行為如下表所示：

white-space 屬性值一覽表 

屬性值空白符換行符自動換行最早出現于

normal合并忽略允許CSS 1

nowrap合并忽略不允許CSS 1

pre保留保留不允許CSS 1

pre-wrap保留保留允許CSS 2.1

pre-line合并保留允許CSS 2.1

（注：在 CSS1/2 下，white-space 屬性只可應用于塊級元素；在 CSS 2.1 下，可應用于所有元素。）

如果我們需要某個容器元素具有類似 <pre> 元素的空白符處理行為，則為它設置 {white-space: pre;} 樣式即可。

對 pre-wrap 的需求

我們先解釋一下上述表格中的“自動換行”行為，它是指某元素內部的文本流按照文本方向排版，當文本流遇到限制其繼續延伸的邊界時，是否換行。“不允許自動換行”則意味著文本流會溢出該元素。

因此，{white-space: pre;} 樣式有時候并不能滿足我們的期望。比如，在某些不需要特別嚴謹的場合，或者排版某些對換行不敏感的代碼片斷（比如 HTML 或 CSS）的時候，我們不希望代碼片段中的一行長代碼令它的容器元素產生水平滾動條，因為那樣不便閱讀。我們希望在這種情況下，長代碼自動換行就好。

這時，對照一下上表中各屬性值的不同行為特征，我們會發現 pre-wrap 這個屬性值脫穎而出——它正是我們所需要的。