zoukankan      html  css  js  c++  java
  • 多行或者单行文本超出显示点点点,如果保证内容始终垂直居中?

    我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-items:center;则当文字内容过多的时候会不上下文字有截断;

    现在效果如下:

     

    .info_des {
          .margin-all(10, 10, 12, 8);
          display: flex;
          align-items:center;
          div{
            .line-height(21);
            .height(42);
            .font-size(14);
            color: #000;
            letter-spacing: 0.01px;
          }
        }
        
    /*只能显示两行,超出显示省略号*/
    .line_clamp2{
        overflow: hidden!important;
        text-overflow: ellipsis!important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: normal;
        word-wrap: break-word;
    }
    <div class="info_des">
            <div class="line_clamp2">is the leading online shopping platform in is the leading online shopping platform inis the leading online shopping platform in</div>
    </div>

    解决方法:

    display:flex;垂直居中的是里面元素的居中,那就给外层div一个固定高度这里是两行文字的行高,里面文字不要给高度,当有一行的时候里面的div高度就是一行的高度就会垂直居中,有两行文字的时候就会显示两行的文字,并且不影响超出显示点点点的效果;

    修改后的样式:

    .info_des {
          .margin-all(10, 10, 12, 8);
          display: flex;
          align-items:center;
          .height(42);
          div{
            .line-height(21);
            .font-size(14);
            color: #000;
            letter-spacing: 0.01px;
          }
        }
  • 相关阅读:
    004_Linux命令之查找与检索
    Linux passwd文件释义
    等保2.0涉及的PostgreSQL
    等保2.0测评:VMware ESXI
    等保2.0测评:Redis 数据库配置
    等保2.0测评之Nginx 中间件
    netcat使用方法
    Zookeeper的功能以及工作原理
    Nginx三大功能
    jellyfin错误 播放错误 该客户端与媒体不兼容,服务器未发送兼容的媒体格式 的解决办法
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/10028788.html
Copyright © 2011-2022 走看看