CSS实现单行、多行文本溢出显示省略号（…）

1.单行文本

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;


2.多行文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-line-clamp用来限制在一个块元素显示的文本的行数
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
3. 多行省略号 另一种方法，并加渐变
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
将height设置为line-height的整数倍，防止超出的文字露出
给p::after添加渐变背景可避免文字只显示一半