使用多行省略失效

最新推荐文章于 2024-05-21 14:00:56 发布

转载最新推荐文章于 2024-05-21 14:00:56 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/candy_home/article/details/79646655

文章标签：

#多行省略 #失效 #js #原生 #多行省略失效

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在CSS中实现多行文本省略显示的方法，通过使用-webkit-box和-webkit-line-clamp属性，结合-webkit-box-orient:vertical，可以有效地控制文本的显示行数。特别指出的是，当使用autoprefixer时，需注意其可能移除某些前缀，文中提供了一种通过注释开关来保留特定前缀的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很神奇的
使用多行省略的时候
原始代码为：

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

默认编译的时候，会过滤
-webkit-box-orient: vertical;
改变方式，关闭 autoprefixer 然后再开启：用注释就可以做到，简直黑科技
代码：


.line-ellipsis-2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

参考地址：https://blog.youkuaiyun.com/candy_home/article/details/79646655