明明运行很ok，产品验收就出问题，省略号都在玩我，桶来！

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

需求

好多个项目都用到了，一直都很ok，测试运行都很好，送给产品验收了；产品怼了，这个超长的省略就行，你没给我显示省略号啊，明明之前都是好的，我基本是复制粘贴都ok，刚开始解释是个别浏览器不支持，验证下来所有浏览器都是一样，被围观，怼了还不能反驳，一时无言，越想越气！

代码

代码很简单就是之前常用的css：

@mixin overflowBox($num) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  word-break: break-all;
}

问题

查找了postcss开源github文档，17年出的前缀bug，有人hack解决了，一直沿用，目前官网说新版本直接解决了

百度一遍，说注释要加!,之前都可以稳定运行的，当真加了!就行，再看打包后/*!打包后保留注释，原来是压缩编译在postcss处理之前，如果注释被清除后，postcss插件还是处理了这个-webkit-box-orient，将其前缀清除了。

解决方案

postcss升级吧，官方都说不再清除这个-webkit-box-orient前缀了，可是很多都是插件自带的，那还是老实用注释标明吧，只不过要加上这个！符号。

@mixin overflowBox($num) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  /*！ autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  word-break: break-all;
}

最后

最后的最后，默默上线了一波，笑着对产品说，刚才是代码没提交，刚好，您，再看看！