文本溢出显示省略号总结

单行文本
实现方式:

overflow: hidden;  //隐藏多余的内容
white-space: nowrap; //文本不换行
text-overflow: ellipsis; //显示省略号

多行文本
实现方式一:

display: -webkit-box;  //弹性伸缩盒子模型
-webkit-box-orient: vertical;  //垂直排列框的子元素
-webkit-line-clamp: 3;  //限制在一个块元素显示的文本的行数
overflow: hidden;
# 目前没有浏览器支持 box-orient 属性。
# Firefox 支持替代的 -moz-box-orient 属性。
# Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。
# 以上三个属性必须结合使用

实现方式二:

p {
  position: relative;
  height: 40px;
  overflow: hidden;
}
p::after {  
  content: "..."; 
  position: absolute;
  bottom: 0; 
  right: 10px; 
  padding-left: 40px;
  background: linear-gradient(to right, transparent, #fff 70%);
}

效果