|
對 pre-wrap 的另一種需求
再來看另一種實戰(zhàn)中可能會遇到的情形。
表單中的文本域（<textarea> 元素）可以接受包含換行符的文本數(shù)據(jù)，這是它有別于文本框（text 類型的 <input> 元素）的重要特征之一，所以我們通常也稱它為“多行文本框”。
隨之而來的一個問題就是，我們通過多行文本框提交多行文本數(shù)據(jù)，是為了在網(wǎng)頁上最終顯示出多行文本。但由于瀏覽器對 HTML 源代碼默認進行空白符合并處理，為了確保我們提交的多行文本數(shù)據(jù)最終在網(wǎng)頁上正確地呈現(xiàn)出多行的形態(tài)，通常需要在服務(wù)器端做處理，比如將文本中的換行符轉(zhuǎn)換為 HTML 的換行標簽 <br>，再寫入數(shù)據(jù)庫；或者從數(shù)據(jù)庫中讀出文本數(shù)據(jù)時進行類似的轉(zhuǎn)換操作。
這樣當服務(wù)器向網(wǎng)頁輸出這些文本數(shù)據(jù)時，原始的回車狀態(tài)才能得到再現(xiàn)。
但是，由于設(shè)計失誤（或系統(tǒng)有意限制），服務(wù)器端可能就不會做這樣的處理。從而導(dǎo)致這些文本信息中的換行符無法呈現(xiàn)出換行效果，取而代之的是一個小空格。
（下圖為 cnBeta 網(wǎng)站對評論文本的兩種不同處理方式：左側(cè)為普通評論，可能為了限制各條評論的高度、防止惡意刷屏，系統(tǒng)未做換行符轉(zhuǎn)換處理；右側(cè)為熱門評論，系統(tǒng)進行了處理。）
如果服務(wù)器端因為疏忽沒有做換行符轉(zhuǎn)換處理，那么在前端是否可以用最小的代價來補救？這時，pre-wrap 就可以發(fā)揮作用——無需做任何的額外處理，直接為文本的容器元素設(shè)置 {white-space: pre-wrap;} 樣式，就可以還原多行文本的真實狀態(tài)。
杯具的 IE6 和 IE7
再來看一下上面的表格，我們發(fā)現(xiàn) pre-wrap 是從 CSS 2.1 才開始引入的屬性值。然而，目前網(wǎng)民使用最為廣泛的 IE6 和 IE7 瀏覽器都是基于 CSS1 和部分 CSS2 的，它們完全不能識別 pre-wrap，當然也無法實現(xiàn) pre-wrap 的空白符處理行為。
在瘋狂地問候了微軟、IE 及其相關(guān)人等之后，網(wǎng)頁開發(fā)者們還是不得不面對這個問題——如何在 IE6,7 下實現(xiàn) pre-wrap 的效果？
出處：藍色理想
責任編輯：bluehearts
上一頁 IE6,7下實現(xiàn)white-space:pre-wrap; [1] 下一頁 IE6,7下實現(xiàn)white-space:pre-wrap; [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 IE6,7下實現(xiàn)white-space:pre-wrap; [2]
