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

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

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

word-wrap:這個(gè)屬性可以控制換行.當(dāng)屬性取值break-word時(shí),將強(qiáng)制換行,中文文本沒有任何問題,英文語句也沒有問題.但是對于長串的英文就不起作用,也就是說,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表示,對th定義css如下

th{word-break:keep-all;/*禁止詞斷開顯示*/

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

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

在ie6,7,8,ff,chrome,opera,safari,遨游瀏覽器下測試都沒問題

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

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

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

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