vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。如下图:


vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题_第1张图片
-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这个插件的问题,其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图:


vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题_第2张图片

.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;

}

你可能感兴趣的:(vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题)