在项目中要实现多行省略,-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 */
注意,前面是有“ ! ”的
本文介绍了解决webpack打包后多行省略样式-webkit-line-clamp不生效的问题,通过调整optimize-css-assets-webpack-plugin配置及使用autoprefixer注释,确保了多行省略效果在项目中正确应用。
1011

被折叠的 条评论
为什么被折叠?



