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

甘竹牌精装豆鼓鲮鱼罐头鱼小吃下饭菜储备

甘竹罐头,甘香可口。广东甘竹罐头有限公司始创于1988年,专业的罐头生产经验,生产鱼罐头、玉米罐头,肉罐头,豆类罐头等多种罐头,产品销往全国。 甘竹牌精装豆鼓鲮鱼罐头鱼 淘宝官方店铺:甘竹牌 甘竹官方 精装豆鼓鲮鱼罐头鱼227*4罐鱼干小吃下饭菜储备(¥60) 零添加 成份 …
浏览: 66 标签:  ,  ,  ,  ,  , 

日常生活用品食品药品物资应急储备

收集自网络,仅供参考。 应急食品储备 北戴河(BDH)900 铁听压缩饼干 200g*20包 鹰金钱 茄汁黄豆罐头198g 香纳兰 纯正泰国香米2.5kg(进口原粮 泰米 大米) 香纳兰 泰国香米 泰国茉莉香米 5kg(原装进口 泰米 ) 万字 纯酿造酱油 1.8L 甘竹牌-精装豆鼓鲮鱼罐头鱼227*4罐鱼干小…
浏览: 26 标签:  ,  , 

N95 口罩如何消毒/重复利用?

最近因为疫情,想必不少人(包括老杨)为口罩犯愁。别说 N95 口罩,就是普通医用外科口罩都难买到。 买不到只能省点用,循环利用。循环用肯定得先消毒。 温馨提示:方法仅供参考,后果自负! N95 口罩如何消毒? 高温、水煮,肯定是不行的。网上有专家说隔水蒸……可行?老杨觉得不靠谱。 …
浏览: 150 标签:  ,  ,  ,  , 
浏览: 41 标签:  ,  , 

Comments:0

发表留言

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