vue中打包后出现css中文本超出部分隐藏显示省略号失效

这是webpack的锅，webpack打包后-webkit-box-orient被移除，所以导致失效。

【产生原因】：autoprefixer自动移除老式过时的代码

【关于autoprefixer】 : https://www.npmjs.com/package/autoprefixer

解决方法一：

添加注释关闭autoprefixer,但是如果有清除注释的插件，请将插件设为false,否则不生效：
注意要带上感叹号！！！！！

 .content {
          display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
          -webkit-line-clamp: 2; /*显示的行数；如果要设置2行加...则设置为2*/
          overflow: hidden;
          text-overflow: ellipsis; /* 溢出用省略号*/
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
          /* autoprefixer: on */
        }

解决方法二：

将autoprefixer设置为false,或者只是将移除功能关闭

autoprefixer:{remove:false}

 需要注意的是cssnano里会有对autoprefixer的配置,而在使用webpack进行css压缩时有使用到optimize-css-assets-webpack-plugin插件,而这个插件实际上就是依靠cssnano来实现其功能,所以我们需要修改插件的配置，在webpack.prod.conf.js里找到css的打包策略：

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 new OptimizeCSSPlugin({
     cssProcessorOptions: {
         safe: true, map: { inline: false }, 
         autoprefixer: { remove: false }  //添加对autoprefixer的配置

    }
 })

详细请看：

https://blog.csdn.net/screaming_color/article/details/80915154

https://www.jianshu.com/p/26e167e85b1d

https://blog.csdn.net/bamboozjy/article/details/81241234