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