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

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

作者: 木西_816c | 来源:发表于2019-04-30 14:49 被阅读0次

    这是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中打包后出现css中文本超出部分隐藏显示省略号失效

          本文链接:https://www.haomeiwen.com/subject/gphvnqtx.html