单行和多行文字超出显示省略号的方法总结

    在做前端时，会经常遇到限制文字字数的问题。文字超出会影响页面效果，不美观。下面是小编工作中常用的限制文字行数，超出显示省略号的方法：

一、单行文字超出显示省略号，这个很简单，代码如下：

.line{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

    注：1、line必须是块或行内块状，否则overflow不起作用，也就起不到截断文字的作用了。
         2、line必须被限制宽度。


二、多行文字超出显示省略号：
    1、css方法：

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

    注：1、-webkit-line-clamp的值，就是您需要显示的行数。上面的css属性，一个都不能少。
         2、其实，它仍然换行了，只不过超出-webkit-line-clamp限制的行数都被overflow: hidden隐藏了，所以，如果您设置了高度和行高，行高乘以-webkit-line-clamp限制的行数一定要略大于高度，否则会出现文字被“拦腰斩断”的情况。
     3、看到这么多 -webkit- 我想您也知道兼容性如何了，在做混合APP开发或者手机端还能一试，但开发web端就建议不要用这个了，下面的JS兼容性更好。

三、文字超出多行显示省略号的JS方法：

.box{
    height:50px;
    width:100px;
    border:1px solid red;
}
p{line-height:25px; padding:0; margin:0;}

<div class="box">
    <p>单行和多行文字超出显示省略号的方法总结单行和多行文字超出显示省略号的方法总结单行和多行文字超出显示省略号的方法总结</p>
</div>

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

    注：此方法的好处是兼容性好，但毕竟是js，会出现闪烁的问题。

    大家还有什么更好的方法欢迎留言，小编学识浅薄，让小编也涨涨学问。