IE定義了多個換行處理屬性:line-break,word-break,word-wrap,另外css1定義了White-space,css3增加了word-wrap

line-break:專門負責控制日文換行,國內的設計師接觸的比較少

word-break:這個屬性主要針對亞洲語言和非亞洲語言進行控制換行.當屬性取值break-all時,可以允許非亞洲語言文本行的任意字內斷開;當屬性取值keep-all時,表示在中文,韓文,日文中是不允許字斷開的

word-wrap:這個屬性可以控制換行.當屬性取值break-word時,將強制換行,中文文本沒有任何問題,英文語句也沒有問題.但是對于長串的英文就不起作用,也就是說,word-wrap:break-word是控制是否斷詞,而不是斷字符;取值為normal時表示控制連續文本換行

White-space:具有格式化文本的作用,當屬性取值為nowrap時,表示強制在同一行內顯示所有文本,當屬性取值為pre時,表示顯示預定義文本格式

css3中的word-wrap屬性尚未被廣泛支持,支持的瀏覽器有IE6,7,8,9,Firefox3.5,opera10.5,Safari3.0,Safari4.0,chrome

應用:

防止表格的標題行換行

將表格的標題行用th表示,對th定義css如下

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

word-warp:normal;/*允許內容頂開指定的容器邊界,如果聲明了word-wrap:break-word則會在IE瀏覽器中出現換行顯示,會破壞整個標題行的樣式*/

white-space:nowrap;/*強迫在一行內顯示*/}

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

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

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

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

更多信息請查看IT技術專欄