之前做项目管理项目比较多，竟然从来不知道多行文本溢出显示省略号的常规写法
（overflow: hidden;text-overflow:ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;）在IE和Firefox是无效的，可见前端学习的无止境不止体现在js和各种主流框架等等，在css上也是一样。话不多说，直接上方案。
我在网上看到有两个好的解决办法，一个是利用js设置，一个是纯css（这个特别巧，我反正想不到）。特此记录一下。
HTML部分
html.png
一、js方法（手动写出省略号，将超出部分隐藏，省略号拼接到显示区最后面，达到超出显示省略号的效果）
css部分，首先设置好P标签的width和line-height，overflow:hidden等属性，再利用伪元素p::after设置省略号的内容和位置。代码如下：
css1.png
渐变背景是为了解决手动添加的省略号突兀的问题。
js部分，获取内容高度，除以行高，对比要显示的行数，让省略号显示或隐藏。代码如下：
js.png
二、css方法（利用浮动的特性实现，同时设置两个伪元素）。代码如下：
css2.png
最后的效果都是这样子的。
interface.png
网友评论