最近遇到一个奇怪的问题，在设置超出n行即显示省略号的css时，开发环境都没有问题，而build之后发现不好使，通过调试发现是-webkit-box-orient这个样式丢失了

我写的css样式

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

打包之后的css样式，缺少-webkit-box-orient

display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;

初步认定这是webpack打包的问题（开发环境没问题，正式环境有问题），经过查找资料发现如下解决方案，在-webkit-box-orient这个样式的前后加两句注释即可

display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 2;
overflow: hidden;

autoprefixer插件用来自动补全css兼容样式，比如当我们写display:flex样式的时候，实际编译后可能是这样的

display: -ms-flexbox;
display: flex;

这就避免了我们在写css代码的时候，每次都要自己去写兼容的css，即耗费脑筋，又不一定写全，可谓是一个解决css兼容性的利器啊。

如果在CSS的某些部分不需要自动检测，可以使用控制注释来禁用Autoprefixer。在下面的示例中，将在整个b规则范围内Autoprefixer，而不仅仅是在注释之后

a {
    transition: 1s; /* it will be prefixed */
}
 
b {
    /* autoprefixer: off */
    transition: 1s; /* it will not be prefixed */
}

还可以递归地使用注释：

/* autoprefixer: off */
@supports (transition: all) {
    /* autoprefixer: on */
    a {
        /* autoprefixer: off */
    }
}