css实现省略号

一、使用css实现

.slh {
　　width:200px;
3　　 display: block;
　　overflow: hidden;
　　white-space:nowrap;
　　-o-text-overflow:ellipsis;
　　text-overflow:ellipsis;
}

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

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

//截取字符串，显示省略号
function textAuto(){
$(".slh").each(function(){
var nowLen = $(this).html().length;
var width=$(this).css("width").replace("px","")-0;
var needLen = width/14;
if(nowLen > needLen){
var nowWord = $(this).html().substr(0,needLen)+'...';
$(this).html(nowWord);
}
});
}

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