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

  • 相关阅读:
    RHEL6安装JDK7
    Linux 下安装配置 JDK7(2)
    Linux安装Tomcat7
    useradd命令
    Linux下搭建tomcat集群全记录
    (转)通向架构师的道路(第五天)…
    Apache2.2安装图解
    (转)apache2.2.x+tomcat7.0.x集群+…
    web性能并发测试工具(转)
    Hibernate注解详细介绍
  • 原文地址:https://www.cnblogs.com/xfcao/p/10676221.html
Copyright © 2011-2022 走看看