一、单行溢出
在前端基础，单行文本的溢出显示省略号，这种做法我们通常用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（如：…）；兼容ie8需要将::after替换成:after。
四、我们能不用js的方法来实现了？答案也是可以的 。具体代码如下：
html 代码：
css代码：
js代码：
效果如图：
通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度，到达效果，这种方法可以兼容各种浏览器。
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com