多行超出隐藏,一般的css样式:
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
在普通的web项目中,这样做是完全OK的
但是在vue项目中,一启动项目就会发现多行文本隐藏失效了,打开控制台发现-webkit-box-orient: vertical; 这行代码没了,原因是在打包部署的时候此属性会被删掉,解决方法如下:
在 package.json 中修改 browserslist :
"browserslist": [
"> 1%",
"last 2 versions",
"last 10 Chrome versions",
"last 5 Firefox versions",
"Safari >= 6",
"ie > 8"
]
在重新启动,问题解决!