-webkit-line-clamp 控制行数失效

在vue项目里 写了一个css样式 用来控制 显示的行数，只显示3行多出来的用引号代替，在本地运行的vue项目里没有问题，但是打包后放到测试环境 控制行数的样式就不生效了。查找资料网上说是因为 -webkit-box-orient: vertical;这个属性不是规范会被打包的postCSS这个插件去掉的。在网上找了几个方法，其中有一种亲测可以。

一、样式代码

.name{
                font-size:.3rem;
                line-height:.32rem;
                color:#373639;
                display:-webkit-box;
                text-overflow:ellipsis;
                -webkit-line-clamp:2;
                -webkit-box-orient:vertical;
                overflow: hidden;
    }

二、解决方案

1、方案一：原因可能是因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作。但是这个方法在我的项目里不生效，大家可以试下。

.name{
         font-size:.3rem;
       line-height:.32rem;
      color:#373639;
       display:-webkit-box;
      text-overflow:ellipsis;
      -webkit-line-clamp:2;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      overflow: hidden;
    }

2、方案二： 用 /*! autoprefixer: ignore next */ 语句 。但是这个方法在我的项目里也不生效，大家可以试下。

.name{
         font-size:.3rem;
       line-height:.32rem;
      color:#373639;
       display:-webkit-box;
      text-overflow:ellipsis;
      -webkit-line-clamp:2;
      /*! autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

3、方案三：这个方法适合多个地方使用了 控制行数的情况，这个方法亲测有效。
1>、安装依赖这个依赖：npm i -S optimize-css-assets-webpack-plugin
2>、并且注释掉 build ---> webpack.prod.conf.js中的一段代码：

 new OptimizeCSSPlugin({
     cssProcessorOptions: config.build.productionSourceMap
       ? { safe: true, map: { inline: false } }
       : { safe: true }
 })