vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。如下图:.topic-info {margin: 5px 10px;font-size: .8em;text-indent: 2em;d...
·
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。如下图:
.topic-info {
margin: 5px 10px;
font-size: .8em;
text-indent: 2em;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
后来在网上查询一番,发现可能是optimize-css-assets-webpack-plugin
这个插件的问题,其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图:
.topic-info {
margin: 5px 10px;
font-size: .8em;
text-indent: 2em;
display: -webkit-box;
-webkit-line-clamp: 4;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
}
参考链接:
https://segmentfault.com/q/1010000009360389更多推荐
已为社区贡献1条内容
所有评论(0)