• 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用


    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    超过两行显示省略号

    1 display: -webkit-box;
    2 -webkit-box-orient: vertical;
    3 -webkit-line-clamp: 2;
    4 word-break: break-all;
    5 overflow: hidden;

    overflow:hidden 是必须的 
    word-break:break-all;必须的,连续英文折行

    网上有这么说的 

    第一种

    autoprefixer只自动添加webkit,其他的不加

        /* autoprefixer: off */  
          -webkit-box-orient: vertical;  
          /* autoprefixer: on */  

    第二种

    1、安装依赖这个依赖:npm i -S optimize-css-assets-webpack-plugin

    2、并且注释掉webpack.prod.conf.js中的一段代码:

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

    个人推荐第二种方法,因为只要修改配置看就好了,第一种还有每个地方都要写 autoprefixer

  • 相关阅读:
    字符串分割并按大小排序
    为人之气
    RMQ
    线段树
    算法中的数学
    动态规划(DP)
    图的表示
    广度优先搜索(BFS)
    深度优先搜索(DFS)
    MyBatis(3.2.3)
  • 原文地址:https://www.cnblogs.com/xfcao/p/10676221.html
Copyright © 2020-2023  润新知