单行:
p {
width: 200px;
height: 30px;
line-height: 30px;
color: #000;
font-size:30px;
border:1px solid red;
white-space: nowrap; /*文本单行不换行,剪切溢出部分,
最后加省略号*/
overflow: hidden;
text-overflow: ellipsis;
}
多行:
通过伪类添加,搭配js实现不溢出时隐藏
p {
width: 200px;
height: 150px;
line-height: 30px;
color: #000;
font-size:24px;
border:1px solid red;
position: relative;
overflow: hidden;
}
p:after{
content: "..."; /*"\02026"*/
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: linear-gradient(to right, transparent 0%,#fff 60%); /背景颜色线性渐变遮挡背后颜色/
}
补充一下:
background: linear-gradient(to right, transparent 0%,#fff 60%);
指的是从左向右,从透明色渐变成白色,60%指的是transparent在水平进度到60%时已经变成白色
如下在webkit内核浏览器中适用的:
p{
display:-webkit-box !important;
overflow: hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; /*规定文本几行*/
}