超過兩行顯示省略號 -webkit-line-clamp、-webkit-box-orient vue打包後不起做用

爲了實現兩行顯示縮略顯示，可是本地是能夠顯示，打包後不起做用

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

 

 

 

 

超過兩行顯示省略號

1 display: -webkit-box;
2 -webkit-box-orient: vertical;
3 -webkit-line-clamp: 2;
4 word-break: break-all;
5 overflow: hidden;

overflow：hidden 是必須的 
word-break:break-all;必須的，連續英文折行

網上有這麼說的 

第一種

autoprefixer只自動添加webkit，其餘的不加

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

第二種

一、安裝依賴這個依賴：npm i -S optimize-css-assets-webpack-plugin

二、而且註釋掉webpack.prod.conf.js中的一段代碼：

new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    })

我的推薦第二種方法，由於只要修改配置看就行了，第一種還有每一個地方都要寫 autoprefixer