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

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

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

2、line必须被限制宽度。

二、CSS解决多行文字超出显示省略号：

注：1、-webkit-line-clamp的值，就是您需要显示的行数。上面的css属性，一个都不能少。

2、其实，它仍然换行了，只不过超出-webkit-line-clamp限制的行数都被overflow: hidden隐藏了，所以，如果您设置了高度和行高，行高乘以-webkit-line-clamp限制的行数一定要略大于高度，否则会出现文字被“拦腰斩断”的情况。

3、看到这么多 -webkit- 我想您也知道兼容性如何了，在做混合APP开发或者手机端还能一试，但开发web端就建议不要用这个了，下面的JS兼容性更好。

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

注：1、此方法的好处是兼容性好，缺点会出现闪烁的问题。

2、这是jquery，所以务必要引用jquery哦

四、JS方法，根据高度自适应1行、2行、3行，溢出...，此方法方便优雅

五、总结

每个方法都有他存在的理由，适合不同的场景需求，没有好坏之分，只有适合之分，现在浏览器兼容越来越好，推荐还是css3方法解决，如果大家还有什么更好的方法欢迎留言，小编学识浅薄，让小编也涨涨学问。关注IT学堂，每天都有鲜货哦！