CSS -webkit-box-orient: vertical 属性编译或打包后丢失问题

最近在写项目的时候遇到一个问题，需求是表格中的备注字段只显示2行，超出显示…，鼠标悬浮显示完整。

代码如下：

//这里我直接封装成了一个全局组件，方便在项目里使用。
<template>
  <div
    v-if="value"
    v-html="value.replace(/\n/g, '</br>')"
    :title="value"
    class="table_textarea_cell"
    style="-webkit-box-orient: vertical"
  ></div>
</template>

<script>
export default {
  name: "TableTextareaCell",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang='scss' scoped>
.table_textarea_cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}
</style>

overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 溢出不换行
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

但是代码经过打包之后就把 -webkit-box-orient: vertical 干掉了。

解决方案一：

/* autoprefixer: off*/
 -webkit-box-orient: vertical; 
/* autoprefixer: on*/

解决方案二：

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

解决方案三：

<div style="-webkit-box-orient: vertical">内联样式</div>