|
在 IE6,7 下變通實(shí)現(xiàn) pre-wrap
經(jīng)常反復(fù)測(cè)試，我們找到了在 IE6,7 下變通實(shí)現(xiàn) pre-wrap 效果的方法。
比如，有如下 HTML 結(jié)構(gòu)：
<div class="content">這是一段多行文本數(shù)據(jù)其中某些文本行會(huì)非常長(zhǎng)從而溢出容器比如你現(xiàn)在看到的這行行與行之間有換行符但沒(méi)有使用 HTML 換行標(biāo)簽</div>
我們需要將 .content 元素設(shè)置為 pre-wrap 樣式，理想情況下只需要編寫(xiě)如下 CSS 代碼就可以了。、
.content {
white-space: pre-wrap;
}
但為了應(yīng)付 IE6,7，我們需要將上述 CSS 代碼修改如下：
.content {
white-space: pre-wrap;
*white-space: pre;
*word-wrap: break-word;
}
這樣就可以了，我們?cè)诟鳛g覽器中實(shí)測(cè)一下，可以發(fā)現(xiàn)我們需要的效果完美實(shí)現(xiàn)。
當(dāng)然，你可能注意到了，我們使用了一點(diǎn)兒 CSS hack。別擔(dān)心，它們條理清晰并且容易維護(hù)，我覺(jué)得這可以接受。在面對(duì)低能瀏覽器的時(shí)候，我們只能給予它們一些額外關(guān)照。
原理
如果你是一個(gè)實(shí)用主義者，那么文章到這里已經(jīng)結(jié)束了。你可以把代碼存下然后走人，或者繼續(xù)瀏覽 CSS魔法 的其它文章。如果你是一個(gè)充滿好奇心的 CSS 學(xué)習(xí)者，那么我很樂(lè)意與你一起來(lái)分析一下它的實(shí)現(xiàn)原理。
在上面的最終版 CSS 代碼中，很顯然對(duì)于標(biāo)準(zhǔn)瀏覽器，我們是用正常的 {white-space: pre-wrap;} 來(lái)實(shí)現(xiàn)所需效果的。而對(duì)于 IE6,7，我們使用了 CSS hack，讓它接受額外的樣式聲明，使用其它方法來(lái)實(shí)現(xiàn)類(lèi)似 pre-wrap 的效果。
首先，在 IE6,7 下，{white-space: pre-wrap;} 這條樣式聲明由于不能識(shí)別而被丟棄，于是我們?yōu)?.content 另外設(shè)置了 {white-space: pre;} 的樣式。我們已經(jīng)很熟悉 pre 了，它的特性與我們想要的 pre-wrap 效果只有一點(diǎn)區(qū)別，即 pre 不允許自動(dòng)換行，也就是說(shuō)，較長(zhǎng)的文本行可能會(huì)溢出其容器元素。
因此，接下來(lái)，為了讓這些較長(zhǎng)的文本行自動(dòng)換行，我們?yōu)?.content 元素設(shè)置 {word-wrap: break-word;} 樣式（謹(jǐn)慎起見(jiàn)，我們用 CSS hack 將這條聲明隔離給 IE6,7；不過(guò)即使將它暴露給所有瀏覽器，它也是無(wú)害的）。這條聲明負(fù)責(zé)對(duì) .content 元素內(nèi)的文本行進(jìn)行約束，并強(qiáng)制其換行。也就是說(shuō)，{white-space: pre;} 完成了識(shí)別文本換行符的任務(wù)，剩下的自動(dòng)換行的任務(wù)交由 {word-wrap: break-word;} 來(lái)完成。
插播 word-wrap 的相關(guān)資料
CSS 發(fā)展至今經(jīng)歷了多個(gè)版本，但它對(duì)文本排版的控制仍然不夠精確和靈活。于是微軟的 IE 瀏覽器開(kāi)發(fā)了一些私有屬性，擴(kuò)展了 CSS 的文本排版功能，尤其可貴的是，這些擴(kuò)展屬性大多考慮到了非拉丁語(yǔ)系語(yǔ)言的排版規(guī)則。由于這些私有擴(kuò)展屬性確實(shí)很有價(jià)值，它們被整理并收錄到了 CSS3 草案中。
word-wrap 屬性就是其中很有代表性的例子。它決定了文本行超過(guò)容器的邊界時(shí)是否斷開(kāi)轉(zhuǎn)行。目前這一屬性已經(jīng)得到了絕大多數(shù)主流瀏覽器的支持。
回到前面的原理分析，其實(shí)我們會(huì)發(fā)現(xiàn)一個(gè)矛盾，{white-space: pre;} 很倔犟地不愿換行，而 {word-wrap: break-word;} 則要求內(nèi)部文本自動(dòng)換行。面對(duì)這樣的沖突，瀏覽器如何決斷？
在 CSS 中，控制文本換行方式的屬性有很多，當(dāng)發(fā)生沖突的時(shí)候，某些屬性在文本排版中的優(yōu)先級(jí)更高，因而會(huì)在沖突中勝出，決定最終的文本樣式。很顯然，在上面的這起沖突中，{word-wrap: break-word;} 更加強(qiáng)勢(shì)，倔犟的文本行最終還是乖乖地?fù)Q行了。
結(jié)語(yǔ)
感謝你看到了這里，希望這篇文章對(duì)你有所幫助！
原文：http://www.cssmagic.net/blog/article/w3c/white-space-pre-wrap-workaround-in-ie6-ie7.html
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2964123-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/7310.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) IE6,7下實(shí)現(xiàn)white-space:pre-wrap; [2] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) IE6,7下實(shí)現(xiàn)white-space:pre-wrap; [3]
