CSS 多行文本最后省略号“...” /多行文本最后一行超出的部分隐藏并显示省略号的方法

老白 3个月前 186浏览 0评论

网上很多的解决方法是针对一行超出部分,隐藏并显示省略号的,代码如下:

overflow:hidden;
white-space:norwrap;
text-overflow:hidden;

针对webkit浏览器,多行显示时可以通过以下css代码实现,但对于非webkit浏览器,这种写法没有效了。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

有没有一种通用的方法来实现,当然有,通过伪类:after来实现

span{
margin:0 19px 4px 17px;
width:112px;
height:57px;
position: relative;
 line-height: 20px;
overflow: hidden;
display:block;
}
 
span:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding:0 17px 1px 0px;
width:27px;
height:20px;
color:#fff;
background-color:#333;
}

但这种写法有点问题,就是只能针对三行的情况,如果内容少于三行时,省略号仍然在第三行,还是有点问题,现进行如下修改:

将span的height去掉,添加max-height:57px;就可以实现多行超出部分隐藏显示省略号的问题

span{
margin:0 19px 4px 17px;
width:112px;
max-height:57px;
position: relative;
 line-height: 20px;
overflow: hidden;
display:block;
}
 
span:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding:0 17px 1px 0px;
width:27px;
height:20px;
color:#fff;
background-color:#333;
}

评论