CSS: webpack打包后-webkit-box-orient: vertical;消失了

前言

多行文本后隐藏的less代码：

.title{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex-direction: column;
}

vue项目中经过webpack打包后，发现样式没有生效，在浏览器调试模式下，发现-webkit-box-orient: vertical;该属性。

Why？

参考segmentfault上的一个问答（原文），原来是webpack打包的问题，详情见该issues（https://github.com/postcss/autoprefixer/issues/776）。

解决方式

在less样式代码中，添加两行注释（该注释的内容不可随意修改）。

.title{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    flex-direction: column;
}

 

嘘寒问暖 不如打笔巨款~