CSS控制省略号问题

 

在页面中，经常会遇到字符串过长的情况，使用substring当然可以解决这个问题，但是界面美观度不够，其实是可以用样式表控制的。

解决方案是：每个元素必须加上宽度限制，table中必须给table加宽度；li中给li加宽度；span中给span加宽度。在包含这些元素的父元素中加宽度对部分浏览器无效

 

Firefox中须添加官方引用，官方引用写入XML文件，LMS/template/ellipsis/elliplis.xml中，然后在样式中加入-moz-binding: url('../../../template/ellipsis/ellipsis.xml#ellipsis');即可支持Firefox3.0浏览器。

备注：这个宽度也可以是在要使用省略号的元素中使用百分比相对宽度。

 

示例如下：

 

#tabletest,#spantest,#ultest { width:300px; background-color:Orange; } #spantest,#ultest { margin-top:50px; } /*IE支持*/ .ellipsisInIE { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; /*Opera 9中支持的样式*/ } /*firefox支持*/ .ellipsis { text-overflow: ellipsis; -moz-binding: url('../../../template/ellipsis/ellipsis.xml#ellipsis'); } #ultest ul li { list-style-type:none; } /*span标签必须加上这个样式*/ #spantest span { display:block; /*必须加上*/ width:80%; } /*IE6中必须加上li的宽度限制*/ ul li { width:80%; } /*table必须限制宽度,在包含table的div中设置width无效*/ table { table-layout:fixed;/*必须加上*/ width:80%; } .td1 { width:40%; } .td2 { width:60%; }