HTML 的空白符處理規(guī)則

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

我們知道，在默認(rèn)情況下，HTML 源碼中的空白符均被顯示為空格，并且連續(xù)的多個(gè)空白符會(huì)被視為一個(gè)，或者說(shuō)，連續(xù)的多個(gè)空白符會(huì)被合并。

然而在有些時(shí)候，我們希望 HTML 源碼中的多個(gè)連續(xù)空格在網(wǎng)頁(yè)瀏覽器中可以真實(shí)地呈現(xiàn)，或者需要源碼中的換行符能起到真正的換行作用。于是，我們發(fā)現(xiàn)了 <pre> 標(biāo)簽，它可以真實(shí)還原它內(nèi)部文本的空白符的真實(shí)情況。

于是我們經(jīng)常會(huì)把一段表示計(jì)算機(jī)代碼的文本放進(jìn) <pre> 標(biāo)簽中，它們?cè)跒g覽器中會(huì)表現(xiàn)出自身的空格縮進(jìn)和換行效果，而不需要我們?cè)黾宇~外的樣式和標(biāo)簽來(lái)控制它的縮進(jìn)和換行。

隨著對(duì) CSS 的了解不斷深入，我們發(fā)現(xiàn)，原來(lái)這一切都是 white-space 屬性在安排。<pre> 元素之所以如此神奇，是因?yàn)樗陨砭哂?{white-space: pre;} 這一默認(rèn)樣式。

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

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

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

我們先解釋一下上述表格中的“自動(dòng)換行”行為，它是指某元素內(nèi)部的文本流按照文本方向排版，當(dāng)文本流遇到限制其繼續(xù)延伸的邊界時(shí)，是否換行?！安辉试S自動(dòng)換行”則意味著文本流會(huì)溢出該元素。