css中换行的名词解释及应用
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下不能显示为省略号,但是超过宽度会隐藏,不会破坏布局