-webkit-box-orient: vertical 打包後丟失的問題

以上代碼是scss中書寫的超出N行省略的css代碼。

正常的，當咱們經過css來控制超出N行隱藏的時候，通常css會這樣來寫，

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

 這幾行代碼的做用是，當內容超出4行時則顯示省略號。 然而， 有時，在經過webpack打包以後，你發現其中的一行代碼

-webkit-box-orient: vertical;

會莫名的消失，而其餘的幾行代碼卻在打包壓縮後的文件中。

-webkit-box-orient: vertical;  // 消失了

 查閱了資料後， 不少人說是optimize-css-assets-webpack-plugin這個插件的問題， 須要將webpack.prod.conf.js中下面的代碼

// 註釋以下代碼

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

然而，刪除這些代碼後，就沒有了css代碼的壓縮了，而爲了解決這個問題，就又須要向utils.js中的css-loader中添加配置項  minimize:  true; 來對css代碼進行壓縮。

 　　然而， 有些時候，你是沒法輕易看到這些配置文件的，就像我如今的項目，  是在laravel項目中寫vue,  全部的文件經過laravel-mix來進行打包。 因此不少的底層的配置你是看不到的， 這樣的話， 上述的解決方式就無用了。

　　另外一種解決的方式是在   -webkit-box-orient: vertical; 這行代碼的先後添加兩行代碼， 詳情以下：

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

　　試過該方法後雖然可以正常保存  -webkit-box-orient: vertical; 不會丟失， 可是在編譯運行時會告警： 

　　正如警告中所說，以上的css處理語句控制的應該是整個css塊，而不是在此以後的css。

 

　　正確的解決辦法是： 在     -webkit-box-orient: vertical; 這行代碼的前面添加一行代碼：      /* autoprefixer: ignore next */ ；  這樣編譯時不會有告警， 也能正常編譯保存。

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

　　固然，  經過行內樣式style=" -webkit-box-orient: vertical; "確定是能生效的，  可是若是不少地方都要用到該css的話，行內樣式未免太過繁瑣， 因此  ， 綜上，   添加   

 /* autoprefixer: ignore next */ 應該是最方便的解決方式了。