单行文本
p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本
- 该方案只适合webkit内核的浏览器或移动端
p{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
- 利用伪元素添加省略号
- before伪元素负责创建位于p标签右下端的省略号
- after伪元素负责创建一个大小大于before伪元素,背景和p标签背景相同且位于p标签右端的元素
- 当文本没有溢出时,after伪元素会覆盖before伪元素
- 当文本溢出后,after伪元素会同样溢出p标签隐藏,before伪元素就会显示出来
p{
height: 50px;
line-height: 25px;
overflow: hidden;
position: relative;
}
p::before{
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
p::after{
content: "";
height: 1em;
width: 1em;
background: white;
position: absolute;
right: 0;
}
- 利用伪元素在结尾添加模糊效果
- 溢出文本隐藏
- after伪元素始终位于p标签右下角,利用背景线性渐变呈现出模糊效果
p{
height: 50px;
line-height: 25px;
overflow: hidden;
position: relative;
}
p::after{
content: "";
position: absolute;
height: 20px;
width: 50px;
background: linear-gradient(to right, transparent , white 80%);
right: 0;
bottom: 0;
}