-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 */ 应该是最方便的解决方式了。