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的配置
 
    }
 })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀...
    _双眸阅读 2,223评论 0 0
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,324评论 4 31
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,233评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110
  • 展示同学姓名:牛冯慧 展示课程名称:《老王》 过程优缺点: 不足 1、教态不够自然,身体僵硬,过程紧张,对讲课流程...
    海狮不会再害怕惹阅读 794评论 0 0