300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > CSS 多行文本最后省略号“…” /多行文本最后一行超出的部分隐藏并显示省略号的方法

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

时间:2022-08-23 05:48:34

相关推荐

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

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:019px4px17px;width:112px;height:57px;position:relative;line-height:20px;overflow:hidden;display:block;}span:after{content:"...";position:absolute;bottom:0;right:0;padding:017px1px0px;width:27px;height:20px;color:#fff;background-color:#333;}

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

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

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

CSS 多行文本最后省略号“…” /多行文本最后一行超出的部分隐藏并显示省略号的方法 – CSS – 前端 ie8兼容 css3

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。