css实现省略号

标签：

一、使用css实现

1 .slh {
2 　　width:200px;
3　　 display: block;
4 　　overflow: hidden;
5 　　white-space:nowrap;
6 　　-o-text-overflow:ellipsis;
7 　　text-overflow:ellipsis;
8 }

优点：简单易用
缺点：如果设置 
ie8+直接根据宽度将宽度截取。而不会显示省略号。
而且如果不规定高度。文本还会换行显示。
所以加一个样式
.height20{height:20px;}

二、使用js实现
另外一种办法是使用js：

 

 1 //截取字符串，显示省略号
 2 function textAuto(){
 3     $(".slh").each(function(){
 4         var nowLen = $(this).html().length;
 5         var width=$(this).css("width").replace("px","")-0;
 6         var needLen = width/14;
 7         if(nowLen > needLen){
 8             var nowWord = $(this).html().substr(0,needLen)+‘...‘;
 9             $(this).html(nowWord);
10         }
11     });
12 }

优点：会根据宽度自动计算显示多少字符数 出现省略号。
缺点：
1、但是如果是字母的话。根据个数计算有可能宽度很短就被截取了。
2、必须在dom的内容填充之后执行截取。需要注意方法执行的时间。

css实现省略号

标签：

原文地址：http://www.cnblogs.com/kingplus/p/5581138.html