最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。如下图:
.news-link .news-link-item .item-info .item-p {
width: 765px;
font-size: 14px;
color: #797271;
line-height: 28px;
text-align: left;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
后来在网上查询一番,发现可能是optimize-css-assets-webpack-plugin这个插件的问题,其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图:
.news-link .news-link-item .item-info .item-p {
width: 765px;
font-size: 14px;
color: #797271;
line-height: 28px;
text-align: left;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:3;
/*! autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
overflow:hidden;
}