ie定義了多個(gè)換行處理屬性:line-break,word-break,word-wrap,另外css1定義了white-space,css3增加了word-wrap

line-break:專門負(fù)責(zé)控制日文換行,國(guó)內(nèi)的設(shè)計(jì)師接觸的比較少

word-break:這個(gè)屬性主要針對(duì)亞洲語(yǔ)言和非亞洲語(yǔ)言進(jìn)行控制換行.當(dāng)屬性取值break-all時(shí),可以允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi);當(dāng)屬性取值keep-all時(shí),表示在中文,韓文,日文中是不允許字?jǐn)嚅_(kāi)的

word-wrap:這個(gè)屬性可以控制換行.當(dāng)屬性取值break-word時(shí),將強(qiáng)制換行,中文文本沒(méi)有任何問(wèn)題,英文語(yǔ)句也沒(méi)有問(wèn)題.但是對(duì)于長(zhǎng)串的英文就不起作用,也就是說(shuō),word-wrap:break-word是控制是否斷詞,而不是斷字符;取值為normal時(shí)表示控制連續(xù)文本換行

white-space:具有格式化文本的作用,當(dāng)屬性取值為nowrap時(shí),表示強(qiáng)制在同一行內(nèi)顯示所有文本,當(dāng)屬性取值為pre時(shí),表示顯示預(yù)定義文本格式

css3中的word-wrap屬性尚未被廣泛支持,支持的瀏覽器有ie6,7,8,9,firefox3.5,opera10.5,safari3.0,safari4.0,chrome

應(yīng)用:

防止表格的標(biāo)題行換行

將表格的標(biāo)題行用th表示,對(duì)th定義css如下

th{word-break:keep-all;/*禁止詞斷開(kāi)顯示*/

word-warp:normal;/*允許內(nèi)容頂開(kāi)指定的容器邊界,如果聲明了word-wrap:break-word則會(huì)在ie瀏覽器中出現(xiàn)換行顯示,會(huì)破壞整個(gè)標(biāo)題行的樣式*/

white-space:nowrap;/*強(qiáng)迫在一行內(nèi)顯示*/}

在ie6,7,8,ff,chrome,opera,safari,遨游瀏覽器下測(cè)試都沒(méi)問(wèn)題

超過(guò)寬度的文字顯示未省略號(hào),對(duì)文本層應(yīng)用wrap類,則wrap的css設(shè)置如下:

.wrap{white-space:nowrap;overflow:hidden;-o-text-ellipsis:ellipsis;/*兼容opera瀏覽器*/text-ellipsis:ellipsis;}

這個(gè)設(shè)置ff下不能顯示為省略號(hào),但是超過(guò)寬度會(huì)隱藏,不會(huì)破壞布局

更多信息請(qǐng)查看IT技術(shù)專欄