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 這個屬性值脫穎而出——它正是我們所需要的。