前言
多行文本后隐藏的less代码:
.title{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex-direction: column;
}
vue项目中经过webpack打包后,发现样式没有生效,在浏览器调试模式下,发现-webkit-box-orient: vertical;该属性。
Why?
参考segmentfault上的一个问答(原文),原来是webpack打包的问题,详情见该issues(https://github.com/postcss/autoprefixer/issues/776)。
解决方式
在less样式代码中,添加两行注释(该注释的内容不可随意修改)。
.title{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
flex-direction: column;
}
嘘寒问暖 不如打笔巨款~