文本溢出隐藏显示省略号失效

之前百试百灵的代码,在这次却不生效了,找了半天都没找到失效原因,唉,惆怅。

在这里插入图片描述

附上之前的代码:

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

后台看到了某博客,瞎猫碰死耗子,试了一下:

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
/*! autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
-webkit-line-clamp:2; 

说是项目中装了 autoprefixer 管理浏览器前缀的插件,导致-webkit-box-orient: vertical; 属性不见了

这个插件不仅能够帮你加 -webkit- 之类的前缀,同时还会帮你删除在 less,css,sass 中的样式 。你会发现你在less文件中写的 -webkit-box-orient: vertical; 属性不见了

虽然我并不认为我的项目中装了这个插件,但神奇的是它生效了,嘿嘿

在这里插入图片描述
于是我这激动得颤抖的小手手,点向了控制台

在这里插入图片描述
嗯?这段警告是怎么肥事?!!

在这里插入图片描述
在这里插入图片描述
然后,我向大佬求助了

在这里插入图片描述

大佬说:“你可以用 height: 40px; line-height: 20px; 这类似的,一行就 1:1,2行就 2:1,溢出来的 overflow: hidden; 就完事了” 。

我瞬间无话可说,唉,大佬就是大佬,头脑就是这么活,膜拜膜拜膜拜拜~

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值