纯 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/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

Windows 局域网共享一键修复 OKShare.bat

Windows 局域网共享一键修复批处理,兼容 Windows 10。OKShare.bat 可一键修复各种网络共享失败问题,如:本机共享无法被访问、无法访问别人共享,无法共享打印机,网络邻居、工作组无法浏览或打开缓慢等问题。 主要功能 查看网络信息 简单共享(无密码) 密码共享 共享和权限设置 …
浏览: 160 标签:  ,  ,  ,  ,  , 

1800年至2100年最早和最晚春节

为搞清春节日期最早和最晚分别会在什么时候出现,就自己编程计算了下,搜索了从1600年至2100年的所有年份,发现最早的春节出现在1月21日,而最晚的春节则出现在2月20日。其中,上一个春节日期极值点位于1985年的2月20日,下一个极值点则要到2061年的1月21日。 1800年至2100年所有春节日期(标有★号…
浏览: 58 标签:  ,  ,  ,  ,  , 

MagicBook Pro 锐龙版 Linux 版 Win 10 无线网卡驱动

MagicBook Pro 锐龙版 Linux版 AMD R5 集显 8GB+512GB (HLY-W19RL),亲测安装 Win 10 LTSB 2016、Win 10 1903,均无法安装到无线网卡驱动,比较坑的是找客服,因为自带 Linux,不提供 Windows 版本驱动。(其实是没有选对型号) 无法确定型号可以到官网查询保修信息来确定:荣耀笔记本产品保修状态…
浏览: 80 标签:  ,  ,  , 
浏览: 61 标签:  ,  , 

Comments:0

发表留言

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