這是webpack的鍋待德,webpack打包后-webkit-box-orient被移除君丁,所以導(dǎo)致失效。
【產(chǎn)生原因】:autoprefixer自動(dòng)移除老式過時(shí)的代碼
【關(guān)于autoprefixer】 : https://www.npmjs.com/package/autoprefixer
解決方法一:
添加注釋關(guān)閉autoprefixer,但是如果有清除注釋的插件将宪,請將插件設(shè)為false,否則不生效:
注意要帶上感嘆號;婷啤!=怠tの埂毙死!
.content {
display: -webkit-box; /*作為彈性伸縮盒子模型顯示*/
-webkit-line-clamp: 2; /*顯示的行數(shù)燎潮;如果要設(shè)置2行加...則設(shè)置為2*/
overflow: hidden;
text-overflow: ellipsis; /* 溢出用省略號*/
/*! autoprefixer: off */
-webkit-box-orient: vertical;/*伸縮盒子的子元素排列:從上到下*/
/* autoprefixer: on */
}
解決方法二:
將autoprefixer設(shè)置為false,或者只是將移除功能關(guān)閉
autoprefixer:{remove:false}
需要注意的是cssnano里會(huì)有對autoprefixer的配置,而在使用webpack進(jìn)行css壓縮時(shí)有使用到optimize-css-assets-webpack-plugin插件,而這個(gè)插件實(shí)際上就是依靠cssnano來實(shí)現(xiàn)其功能,所以我們需要修改插件的配置,在webpack.prod.conf.js里找到css的打包策略:
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true, map: { inline: false },
autoprefixer: { remove: false } //添加對autoprefixer的配置
}
})