前言
相信大家的前端工程化项目中，都会用到 autoprefixer ，它让我们无需关系要为哪些浏览器加前缀。配合 postcss 一起使用会更好。
但同时它也会带来一些问题，例如它不会帮你添加 -webkit- 之类的 prefixer。虽然它会帮你增加新前缀，但也会帮你删除老式过时的代码。
正文
需求来了
例如，我们有一个需求，文本最多显示两行，溢出部分使用省略号表示，要怎么做呢？
代码实现
心想 so easy 啦，然后叭拉一下写出来下面的代码，页面热更新好了，擦了擦眼镜，不是眼花了吧，没成功？（内心十万个马儿奔腾...）
// html <div className={style.text}>关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。</div> // css .text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
结果
预期结果是：✅
预期丰满
可实际上是：
现实骨感
找原因 Why
为什么会这样呢？细心一看，会发现编译后的 CSS 中 -webkit-box-orient: vertical; 不见了。
编译后的CSS
然后就大概能猜出是什么玩意搞鬼了，不是 postcss，就是 autoprefixer 了。然后搜了一番，发现杀人凶手就是 autoprefixer，它把我的 -webkit-box-orient: vertical 吃了（上面提过，会删掉一些过时的规则）
解决方法
- 在 postcss-loader 增加
autoprefixer({ remove: false })。（不推荐） - 只移除过时前缀，不自动增加新前缀：
autoprefixer({ add: false })。（非本文问题解决方案，仅扩展用） - 使用 Control Comments（控制注释，块级）（有效）
.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */ }
- 使用 Control Comments（控制注释，单行）（无效）
网上很多所使用这种方式的，但我测试无效，原因未知。如用补充，欢迎指出修正，谢谢！
.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*! autoprefixer: ignore next */ -webkit-box-orient: vertical; }
- 增加内联样式
style={{WebkitBoxOrient: 'vertical'}}（有效）
在上面列举的几种方法中，个人推荐第 3 种方式。
