zoukankan      html  css  js  c++  java
  • 超过两行显示省略号 -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

  • 相关阅读:
    HDOJ_ACM_统计问题
    HDOJ_ACM_Queuing
    HDOJ_ACM_数塔
    HDOJ_ACM_免费馅饼
    HDOJ_ACM_FatMouse's Speed
    HDOJ_ACM_Monkey and Banana
    斐波南希数列
    .net framework 2.0的WinForm的ShowInTaskBar属性的bug
    寂寞的季节
    广告一下
  • 原文地址:https://www.cnblogs.com/xfcao/p/10676221.html
Copyright © 2011-2022 走看看