|
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)樣式。
white-space 屬性
CSS 中的 white-space 屬性用于設(shè)置文本空白符的處理規(guī)則，這其中包括：是否合并空白符、是否保留換行符、是否允許自動(dòng)換行。各屬性值的不同行為如下表所示：
white-space 屬性值一覽表
| 屬性值 |
空白符 |
換行符 |
自動(dòng)換行 |
最早出現(xiàn)于 |
normal |
合并 |
忽略 |
允許 |
CSS 1 |
nowrap |
合并 |
忽略 |
不允許 |
CSS 1 |
pre |
保留 |
保留 |
不允許 |
CSS 1 |
pre-wrap |
保留 |
保留 |
允許 |
CSS 2.1 |
pre-line |
合并 |
保留 |
允許 |
CSS 2.1 |
（注：在 CSS1/2 下，white-space 屬性只可應(yīng)用于塊級(jí)元素；在 CSS 2.1 下，可應(yīng)用于所有元素。）
如果我們需要某個(gè)容器元素具有類似 <pre> 元素的空白符處理行為，則為它設(shè)置 {white-space: pre;} 樣式即可。
對(duì) pre-wrap 的需求
我們先解釋一下上述表格中的“自動(dòng)換行”行為，它是指某元素內(nèi)部的文本流按照文本方向排版，當(dāng)文本流遇到限制其繼續(xù)延伸的邊界時(shí)，是否換行。“不允許自動(dòng)換行”則意味著文本流會(huì)溢出該元素。
因此，{white-space: pre;} 樣式有時(shí)候并不能滿足我們的期望。比如，在某些不需要特別嚴(yán)謹(jǐn)?shù)膱?chǎng)合，或者排版某些對(duì)換行不敏感的代碼片斷（比如 HTML 或 CSS）的時(shí)候，我們不希望代碼片段中的一行長(zhǎng)代碼令它的容器元素產(chǎn)生水平滾動(dòng)條，因?yàn)槟菢硬槐汩喿x。我們希望在這種情況下，長(zhǎng)代碼自動(dòng)換行就好。
這時(shí)，對(duì)照一下上表中各屬性值的不同行為特征，我們會(huì)發(fā)現(xiàn) pre-wrap 這個(gè)屬性值脫穎而出——它正是我們所需要的。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) IE6,7下實(shí)現(xiàn)white-space:pre-wrap; [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) IE6,7下實(shí)現(xiàn)white-space:pre-wrap; [1]
第 2 頁(yè) 
