解决多行文本换行省略显示失效的问题

相信大家的前端工程化项目中，都会用到 autoprefixer ，它让我们无需关系要为哪些浏览器加前缀。配合 postcss 一起使用会更好。

但同时它也会带来一些问题，例如它不会帮你添加 -webkit- 之类的 prefixer。虽然它会帮你增加新前缀，但也会帮你删除老式过时的代码。

需求来了

例如，我们有一个需求，文本最多显示两行，溢出部分使用省略号表示，要怎么做呢？

代码实现

心想 so easy 啦，然后叭拉一下写出来下面的代码，页面热更新好了，擦了擦眼镜，不是眼花了吧，没成功？（内心十万个马儿奔腾...）

// html
关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。

// 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 吃了（上面提过，会删掉一些过时的规则）

解决方法

1. 在 postcss-loader 增加 autoprefixer({ remove: false })。（不推荐）
2. 只移除过时前缀，不自动增加新前缀：autoprefixer({ add: false })。（非本文问题解决方案，仅扩展用）
3. 使用 Control Comments（控制注释，块级）（有效）

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

4. 使用 Control Comments（控制注释，单行）（无效）
   网上很多所使用这种方式的，但我测试无效，原因未知。如用补充，欢迎指出修正，谢谢！

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}

5. 增加内联样式 style={{WebkitBoxOrient: 'vertical'}}（有效）

在上面列举的几种方法中，个人推荐第 3 种方式。

参考

• Autoprefixer control comments
• 怎样使用 autoprefixer 时保留 -webkit-box-orient 等样式规则
• 可能是最全的 “文本溢出截断省略” 方案合集