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的内容填充之后执行截取。需要注意方法执行的时间。