在网页显示信息时,如果指定显示区域宽度,而显示信息过长,其结果就是信息会撑破指定的信息区域,进而破坏整个网页布局。如果设定的信息显示区域过长,就会影响整体网页显示。以前,我们遇到这样的情况,通常使用 JavaScript将超出的信息进行省略。现在,只需要使用CSS3新增的text-overflow属性,就可以解决这个问题。
text-overflow属性用来定义当文本溢出时是否显示省略标记,即定义省略文本的显示方式,并不具备其他的样式属性定义。要实现溢出时产生省略号的效果还须定义强制文本在一行内显示( white-space: nowrap)及溢出内容为隐藏( overflow: hidden),只有这样才能实现溢出文本显示省略号的效果。
text-overflow语法如下所示：
text-overflow: clip | ellipsis
其属性含义值如下表：
这里需要特别说明的是, text-overflow属性非常特殊,当设置的属性值不同时,其浏览器对text-overflow属性支持也不相同,当text-overflow属性值是clip时,现在主流的浏览器都支持,如果text-overflow属性是ellipsis时,除了Firefox5.0浏览器暂不支持,其他主流浏览器都支持。
发表评论