纯 CSS 多行文本溢出省略号

0 Comment

如题,纯 CSS 多行文本溢出省略号。单行文本溢出省略号一般我们都知道实现方法。

.xxx {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

那么如果多行文本应该怎么做呢?Chrome 走在时代前沿,可以使用 -webkit-line-clamp 属性来实现,这个属性已经有些年头,但是其他浏览器仍然不支持,一声叹息。

.xxx {
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

-webkit-line-clamp 为行数,如果显示3行,则设置为3即可。

悲剧的是 -webkit-line-clamp 只有 webkit 内核支持,于是我们要想办法解决这个问题,纯 css 完美实现是不显示了,只能优雅降级,可以使用下面的方案,把最大高度设置为n倍行高,然后溢出部分隐藏即可。

.xxx {
line-height: 1.2;
max-height: 2.4em;
overflow: hidden;
}

这样做的好处是可以忽略文本的长度,即使文本很短不会出现问题。如果确定文本是肯定溢出的,还可以使用 ::after 伪类来模拟…

大致代码

.xxx {
line-height: 1.2;
max-height: 2.4em;
overflow: hidden;
position: relative;
}
.xxx:after {
content:"...";
position:absolute;
bottom: 0;
right: 0;
background-color: #fff;
}

考虑到文本不一定会溢出,最终解决方案推荐

.xxx {
line-height: 1.2;
max-height: 2.4em;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

全文完。

作者:大发

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/891/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

海盗湾 ThePiratebay 全站备份 38G BT 种子

转载收藏,膜拜 pcbeta 大神dreamxstudio。38.2G 是 BT 种子大小,大约有 2863126 个 BT 种子,基本上相当于有整个海盗湾。 海盗湾 ThePiratebay 全站备份 38G BT 种子简介 抓站网络爬虫 PY 源代码:tpbcatcher@microthread v4.2 海盗湾 ThePiratebay 全站备份 38G BT 种子收藏下载 …
浏览: 161 标签:  ,  ,  , 

飞歌 GS2 AI 智能车机使用/折腾记录

对这个车机要求不高,也就导航,倒车辅助,听听歌。最不爽的是:车没有方向盘控制键(最重要需求是方便调节车机音量大小,一键静音……),而 飞歌 GS2 也没有实体旋钮/按键可以快速调节音量。那为什么还要选择 飞歌 GS2 呢?因为其它牌子也没有找到带实体按键/旋钮的适用车机,同样条件感觉飞歌这个更…

每日必应壁纸 Bing Wallpaper – 微软官方每天自动下载必应图片自动更换桌面工具

一直在用 XP 经典壁纸,最近重装系统,想换换口味,找到了「Bing Wallpaper」,感觉还不错,每天自动换一张微软「Bing」必应最新高清精美背景图片,大多数是风景摄影作品,质量都非常高。 「Bing Wallpaper」是微软官方最近推出的免费「必应桌面壁纸」客户端……每日自动更换必应最新壁纸。 官网…
浏览: 118 标签:  ,  , 

Comments:0

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息