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技术专栏