vue项目中多行文本超出省略失效解决方式

使用vue-cli构建的项目在打包之后，-webkit-box-orient: vertical 会丢失，还有包括使用flex布局进行兼容性hack写法的一些属性，如:

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

若是直接在控制台中添加则没有问题，但一旦添加至vue项目的样式表中，以及打包后都失效了。在此，小编在网上找到了解决的方式，有两种方式：
1、添加autoprefixer，但使用此方法会出现警告，虽然只是警告，但小编是个有些强迫症的人，见不得警告和报红错误。

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

2、利用定位和伪类，此种方式虽能解决，但有个小问题便是需要进一步进行判断是否超出最大高度，否则会导致无论多少字数都会添加该伪类。

p{
    position: relative; 
    width:400px;
    line-height: 20px; 
    max-height: 60px;
    overflow: hidden;
}
p::after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

3、在package.json文件中进行修改或者添加，这样postcss在处理的时候就会自动加上兼容对应浏览器版本的一些属性，使其生效，只有此种方式小编亲测没有警告，没有报红，也不需要进一步判断，总之，不会有以上两种方式另一种问题出现的现象。

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "iOS >= 6",
    "Android > 4.1",
    "Firefox > 20"
]