单行文本
实现方式:
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%);
}
效果
