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

Question

相信大家的前端工程化项目中，都会用到 autoprefixer ，它让我们无需关系要为哪些浏览器加前缀。配合 postcss 一起使用会更好。但同时它也会带来一些问题，例如它不会帮你添加 -webkit- 之类的 prefixer。虽然它会帮你增加新前缀，但也会帮你删除老式过时的代码。

需求来了

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

代码实现

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

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

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

结果

预期表现：

实际表现：

找原因 Why

为什么会这样呢？细心一看，会发现编译后的 CSS 中 -webkit-box-orient: vertical; 不见了。