在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法样式为..
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
结果打包之后不生效.因为webpack打包的时候会将其忽略
根据官方文档.将原本中的注释 .
new OptimizeCSSAssetsPlugin({
cssProcessor: require('cssnano')({
reduceIdents: false
})
})
替换为
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
canPrint: true
})
optimize-css-assets-webpack-plugin
注:如果此方法还不行
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/*! autoprefixer: on */
将样式中加入
/*! autoprefixer: off */
/*! autoprefixer: on */
注意,前面是有“ ! ”的