zoukankan      html  css  js  c++  java
  • 使用多行省略号时,文字重叠的解决方法

    .multiple-lines-ellipsis{

      overflow: hidden;

       text-overflow: ellipsis;

         display: -webkit-box;
         -webkit-line-clamp: 5; 
        /*! autoprefixer: ignore next */    // 这是解决打包之后-webkit-box-orient: vertical;编译丢失和报警告的问题
        -webkit-box-orient: vertical;

    }

    用上边的属性在有的iphone手机上会出现文字重叠的现象,可能是该属性在个别机型上失效,可以尝试使用高度来解决

    .multiple-lines-ellipsis{

      max-height: 2rem;  // 此时的最大高度的值一定是要经过计算出来的你要显示行数的总行高

      overflow: hidden;

       text-overflow: ellipsis;

         display: -webkit-box;
         // -webkit-line-clamp: 5;    // 此时就不需要用行数来显示了
        /*! autoprefixer: ignore next */    // 这是解决打包之后-webkit-box-orient: vertical;编译丢失和报警告的问题
        -webkit-box-orient: vertical;

    }

  • 相关阅读:
    博客美化
    hello world
    mysql数据库索引
    Golang:线程 和 协程 的区别
    计算机网络详解
    Redis持久化机制
    nginx 详解
    多级缓存的分层架构
    svn忽略文件不提交至服务器的方法
    Mysql 事务及其原理
  • 原文地址:https://www.cnblogs.com/qianxiaoniantianxin/p/14378871.html
Copyright © 2011-2022 走看看