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"
]