『vue踩坑日常』处理多行文本遇到的Bug

处理多行文本的问题的时候一般都会用到
-webkit-box-orient: vertical这个属性

p {
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  color: #1d1d1d;
  line-height: 17px;
}

正常情况下出现的样式应该是下面这样的

本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了,于是就会出现下面的样式问题

在网上查找资料的时候看到这个小哥说的

这个出现的原因是因为用optimize-css-assets-webpack-plugin这个插件打包css压缩的时候，会导致它出现问题而不渲染，所以选择渲染禁用掉这一行的autoprefixer

p {
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  font-size: 12px;
  color: #1d1d1d;
  line-height: 17px;
}

再运行，ok