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

2018年6月21日 0 条评论 94 次阅读 0 人点赞

处理多行文本的问题的时候一般都会用到
-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

linwene

☑编程 ☑学习 ☑读书 ☑英语

文章评论(0)