多行文本溢出问题的解决

我们都知道单行文本的溢出问题的解决办法，就是：1.使用宽度with，来限制宽度2. 使用white-space:nowrap/pre来强制限制换行；3. 使用overflow:hidden隐藏溢出文本；4. 使用text-flow:ellipsis来用...来表示隐藏的文本那么多行呢？
 有以下几种方法：
 

1. 使用css3自带的属性-webkit-box来改变，具体方式：
代码示例：

/*css代码：*/overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 2;/*行数*/-webkit-box-orient: vertical;
 

		![在这里插入图片描述](https://img-blog.csdnimg.cn/20201125113203741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MDA4Mw==,size_16,color_FFFFFF,t_70#pic_center)
 

but,
缺点有三点：
i：只能在webkit的内核的浏览器和移动端有用，在低版本的可能用不了，兼容性较差；
ii:不能设置高度。
iii：不够灵活，省略号只会出现在最后一行的末尾。

2. 设置相对定位的容器高度，用包含省略号的元素来模拟实现；

css代码如下：

p{position:relative;line-height:1.4em;height:4.2em;overflow:hidden;
 }
 p:after{conten:"...";position:bsolute;bottom:0px;right:0px;}

效果如图所示：

3. 运用js或者jquery插件，或者自己写方法；
资源在我的博客里面就有，也可以在网上查找。

js代码如下：