继续截取长文本显示省略号（多行）

记得第一篇博客写过单行文本溢出显示省略号，今天就来说说多行文本溢出怎么显示省略号吧

其实也是前些日子做移动端的页面接到这么个需求，本来以为这没法实现，同事跟我说-webkit-line-clamp属性可以，就去查了查，果然

Pc端基本不会有这种需求，因为这个方法兼容性太差，浏览器份额不是webkit占大头（特别是天朝），看前缀就知道只支持webkit内核，他属于webkit内部属性，和-webkit-text-size-adjust: none（这个Pc端已经不在支持，移动端还可以使用）类似，但是移动端不一样，现在移动端基本是ios和Android的天下，这个属性还是很有用的，只需针对WP和Firefox os加上一个max-height 就能防止文本溢出，但不会出现省略号，如果不需要支持上述两个max-height都不需要。

说这么多还是来个栗子http://jsbin.com/vefeb/1/

<p>我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行我要实现多行文本换行</p>

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

-webkit-line-clamp需配上overflow : hidden  text-overflow: ellipsis和伸缩合模型当中的两个属性display: -webkit-box  -webkit-box-orient: vertical;

如果你是三行溢出显示省略号，那-webkit-line-clamp: 3 依次类推，四行就是4、五行就是5。。。

当然你要所有浏览器实现都表现一致，那还得依赖js，利用高度的比较加上正则的替换来实现，实例链接http://jsbin.com/vefeb/5/

 

$(".text").each(function(i){
    var divH = $(this).height(),
　　　　 $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

 

最后还是希望大家拍砖Ps：前端的碎片化太严重啦