css多行文本超出显示省略号的几种实现方式

平时在实现页面效果时，总能遇到各种各样的布局需求，例如显示文本时，要求超出部分不显示，显示省略号，一个很平常的需求，现根据网上查到的实现结果，总结如下，根据需求复杂度，层层递进：

自由溢出，只设定盒子宽高，效果如下：

如果仅仅是在一行显示，超出部分显示省略号，效果如下：

实现代码如下：

此时和你对接的se，对实现效果不太满意，要求在显示几行，要显示的内容很多，但是只给客户看到一行，总是让人感到差强人意；要不就来个5行吧，看下效果：

实现过程：-webkit-line-clamp结合webkit的几个其他属性

此时，如果你比较敏感地 话，觉得上边的实现方式有点限制，，就是必须根据盒子的高度，适配出能显示几行，然后再用-webkit-line-clamp属性规定行数，这样明显让人感到不太合适，就是你必须得知道你要显示的几行；那么还有其他实现方式没，肯定是有的，思路：可以在盒子的右下角固定一个"..."省略号。效果如下：

在盒子的右下角固定一个省略号，有好多种办法，可以用一个标签，或者用：after伪元素；结合渐变，增加一个过渡的效果，前提是背景色必须和盒子的背景相同。

但是这么做是有缺陷的，当盒子里边的内容没达到高度的时候，省略号依然显示。这时需要结合js来实现了，判断盒子内容高度，是否超过盒子的高度，如果超过了就显示伪元素，没超过就不显示了。顺便提及一下，怎么获取盒子的高度，或者盒子内容的高度，从网上download了一张图，看一下也是一目了然：