4种方法实现单行、多行——文本溢出显示省略号

1、单行溢出
在前端基础，单行文本的溢出显示省略号，这种作法咱们一般用text-overflow来实现，而后给元素定宽，超出隐藏，具体以下面一段代码：

显示效果：

2、那么多行文本溢出呢？具体代码以下：


显示效果：

说明：
一、该方法不支持ff，主要是-webkit-line-clamp这一属性不是标注的一部分，多是webkit内部使用的，或者被弃用的。根据存在即合理的原则，也被不少人发现，不妨试一试。

二、display: -webkit-box; 必须结合的属性 ，将对象做为弹性伸缩盒子模型显示

三、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

3、这也是多行文本溢出，采用的:after来解决的。具体代码以下：

显示效果如图：

说明：该方法适用范围广，但在文字未超出行的状况下也会出现省略号,可结合js优化该方法。因此的注意一下几点：
一、将height设置为line-height的整数倍，防止超出的文字露出。

二、给texts::after添加渐变背景可避免文字只显示一半。

三、因为ie6-7不显示content内容，因此要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8须要将::after替换成:after。

4、咱们能不用js的方法来实现了？答案也是能够的 。具体代码以下：

html 代码：

css代码：

js代码：

效果如图：

经过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度，到达效果，这种方法能够兼容各类浏览器。