一直接触到最多的是单行文本溢出添加省略号，对于多行溢出，也会有一定的需求，这篇小札主要记录css实现多行文本溢出添加省略号。
html 代码
<div>
<p>
注意：
1.一定要按这个结构写。
2.你可以在外层div写你需要的样式。
3.p的样式一定要写成下面css的代码，绝对不可以设置p的高度。
</p>
</div>
css样式
div{
/*可设置你需要的样式*/
width:300px;
height:300px;
border:1px solid gray;
padding:20px;
}
p{
width：300px;/*可自定义，也可不设*/
overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出时显示省略标记*/
display:-webkit-box;/*设置弹性盒模型*/
-webkit-line-clamp:3;/*文本占的行数,如果要设置2行加...则设置为2*/
-webkit-box-orient:vertical;/*子代元素垂直显示*/
}
结果：
显示结果
实现要点：
1.p标签绝对不可以设置高度，要让文本自己撑。
原因：在p标签里设置了overflow:hidden，如在p标签里设置了高度，虽然文本会按你所需要的行数添加省略号，但是省略号之后会继续显示后面的文本。如图：
若p添加高度
*overflow:hidden是只有在超出盒子的范围才会隐藏。
2.html结构需要按例子所写，标签可变
原因：之所以要求html这么写是因为你可以在外层div里设置你想要的样式，而不必更改p的样式，p的样式可复用，也可避免出现奇怪的样式。
3.-webkit-line-clamp:number；属性
解释：-webkit-line-clamp这个属性是设置你需要在多少行添加省略号，则写几行。如需要文本显示3行添加省略号，则写成-webkit-line-clamp:3;但是该属性需加上浏览器前缀才生效。
4.display:-webkit-box；属性
解释：display:-webkit-box；属性值为css3旧弹性盒模型，对css3不了解的可不必深究。
