很多有时候，我们希望文本溢出的时候通过显示省略号来提示，相信大多数都知道单行文本溢出通过css的文本溢出属性可以设置，那么，这个归纳一下单、多行文本溢出的情况。

一、单行文本

单行溢出，超出部分显示…，前提必须有宽度。

1
2
3
4
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;

二、多行文本

1
2
3
4
5
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

适用范围：因为使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

为了做到更好的兼容性，这时候需要借助伪类元素来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p{
  position: relative;
  line-height: 20px; 
  max-height: 40px;
  overflow: hidden;
}    
p::after{
  content: "..."; 
  position: absolute; 
  bottombottom: 0; 
  rightright: 0; 
  padding-left: 40px;    
  background: -webkit-linear-gradient(left, transparent, #fff 55%);    
  background: -o-linear-gradient(rightright, transparent, #fff 55%);    
  background: -moz-linear-gradient(rightright, transparent, #fff 55%);    
  background: linear-gradient(to rightright, transparent, #fff 55%);    
}

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。