定义:
文本限制两行,溢出自动省略号
代码:
line-height:.36rem;
height:.72rem;
text-overflow:ellipsis;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
情况:
webpack编译,2行不生效
解决方案:
1.替换成以下三行
/* autoprefixer: off */
-webkit-box-orient:vertical;// 参考 https://github.com/postcss/autoprefixer/issues/776
/* autoprefixer: on */
2,optimize-css-assets-webpack-plugin这个插件的问题
注释掉webpack.prod.conf.js中下面的代码
newOptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap ? {safe:true,map: {inline:false} } : {safe:true}}),
3.强制一行的情况
// 超出宽度隐藏文字,出现省略号
.ellipsis {
white-space:nowrap;
word-break:keep-all;
text-overflow:ellipsis;
overflow:hidden;
}