多行显示时,最后一行超出的部分隐藏并显示省略号
网上很多的解决方法是针对一行超出部分,隐藏并显示省略号的,代码如下:
1 2 3 | overflow : hidden ; white-space :norwrap; text- overflow : hidden ; |
针对webkit浏览器,多行显示时可以通过以下css代码实现,但对于非webkit浏览器,这种写法没有效了。
1 2 3 4 | display : -webkit-box; -webkit-line-clamp: 3 ; -webkit-box-orient: vertical; overflow : hidden ; |
有没有一种通用的方法来实现,当然有,通过伪类:after来实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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;就可以实现多行超出部分隐藏显示省略号的问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 ; } |
1 | 还有一种写法,跟第一种类似,只是加了兼容的写法 |
1 2 3 4 5 6 7 8 | max-height : 44px ; word-wrap:break-word; text- overflow : -o-ellipsis-lastline; overflow : hidden ; text- overflow : ellipsis; display : -webkit-box; -webkit-line-clamp: 2 ; -webkit-box-orient: vertical; |
记录下码代码时的问题。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~