問題描述

在專案中需要使用多行文字溢位顯示省略號(…)的時候，首先想到的css如下：

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

該方式比較合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器。但是在現在一些框架中如(vue,react專案中使用)，會發現本地正常，打包線上後，該屬性丟失。因為webpack打包時把這個樣式過濾掉了。

解決方案

1. 加上這注釋命令

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

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

2.optimize-css-assets-webpack-plugin 從這個外掛的問題源頭解決

註釋掉webpack.prod.conf.js中下面的程式碼

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

這段程式碼實現了css的壓縮 註釋後css就沒有壓縮，所以 還要在utils.js中新增， minimize:true

const cssLoader = {
   loader: 'css-loader',
   options: {
     sourceMap: options.sourceMap,
     minimize:true
   }
 }

3. 方式三

在 webpack.config.js 檔案中，找到 newwebpack.optimize.UglifyJsPlugin，在裡面新增一條 mangle:false，這個的意思是刪除註釋。這樣打包時就註釋和這行程式碼就不會連在一起了