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

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

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

显示效果：

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


显示效果：

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

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

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

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

显示效果如图：

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

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

3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

四、我们能不用js的方法来实现了？答案也是可以的 。具体代码如下：

html 代码：

css代码：

js代码：

效果如图：

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