多行文字时,最后一行文字显示省略号
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
在本地测试时可以使用的,然后项目代码打包后,发现不生效。
检查之后发现打包之后有一行样式丢失了即:-webkit-box-orient: vertical;这就是导致不成功的原因。
意识到问题之后,从网上找到了两种解决方案。
方案一:禁止安装的autoprefixer对这行代码进行优化,这样就可以避免打包后这行代码的丢失。
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
方案二:修改打包配置文件,去掉css的代码压缩
① webpack.prod.conf.js文件中的以下代码需要注释掉
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
② utils.js文件中添加minimize:true:
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
minimize:true
}
}