**
这是webpack的锅,webpack打包后-webkit-box-orient被移除,所以导致失效。
【产生原因】:autoprefixer自动移除老式过时的代码
【关于autoprefixer】 : https://www.npmjs.com/package/autoprefixer
解决办法
**
我用的是第一种办法管用,个人觉得如果是局部的话方法一足够,如果项目里多出用到就需要用第二种方法了。
添加注释关闭autoprefixer,但是如果有清除注释的插件,请将插件设为false,否则不生效: 注意要带上感叹号!!!!!
**
.content {
display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*显示的行数;如果要设置2行加...则设置为2*/
overflow: hidden;
text-overflow: ellipsis; /* 溢出用省略号*/
/*! autoprefixer: off */
-webkit-box-orient: vertical;/*伸缩盒子的子元素排列:从上到下*/
/* autoprefixer: on */
}
方法二:将autoprefixer设置为false,或者只是将移除功能关闭
autoprefixer:{remove:false}
需要注意的是cssnano里会有对autoprefixer的配置,而在使用webpack进行css压缩时有使用到optimize-css-assets-webpack-plugin插件,而这个插件实际上就是依靠cssnano来实现其功能,所以我们需要修改插件的配置(如下)
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true, map: { inline: false },
autoprefixer: { remove: false } //添加对autoprefixer的配置
}
})
原文:https://blog.csdn.net/screaming_color/article/details/80915154