zoukankan      html  css  js  c++  java
  • 一列宽度不缩放,一列宽度弹性缩放,且超出后显示省略号

    行内元素也可以使用 Flex 布局

    
        .box{
          display: inline-flex;
        }
    

    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    
        .item {
          flex-shrink: <number>; /* default 1 */
        }
    

    使用示例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>一列宽度不缩放,一列宽度弹性缩放,且超出后显示省略号</title>
        <style type="text/css">
            .m-wrapper{display: inline-flex; 400px;font-size: 24px;}
            .m-label{flex-shrink: 0;}
            .m-content{margin: 0 0 0 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        </style>
    </head>
    
    <body>
    <div>
        <div class="m-wrapper">
            <span class="m-label">姓名:</span>
            <span class="m-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span>  
        </div>
    </div>
    <div>
        <div class="m-wrapper">
            <span class="m-label">地址地址地址:</span>
            <span class="m-content">中国北京北京中国上海天津</span>    
        </div>
    </div>
    </body>
    
    </html>

  • 相关阅读:
    PHP抓取网络数据的6种常见方法
    Linux scp 使用详解
    php.ini的配置
    VS2013中,将Qt的GUI程序改为控制台程序
    Matlab 摄像机标定+畸变校正
    Camera 3D概念
    旋转矩阵
    #pragma pack()用法详解
    【Boost】boost库获取格式化时间
    C/C++读写csv文件
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924824.html
Copyright © 2011-2022 走看看