vue项目中关于CSS样式【-webkit-box-orient
2018-11-29 本文已影响0人
风中凌乱的男子
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图：
-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;
}
