zoukankan      html  css  js  c++  java
  • flex布局解决内容超过盒子 在flex中设置单行显示

    案例来罗

    代码如下:

    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
        }
        .blockB{
            border: 1px solid pink;
            flex: 1;
            display: flex;
           
        }
        .blockL{
            flex: 1;
            border-left: 1px solid green;
        }
    </style>
    
    <div class="box">
            <div class="blockB">
                <div class="blockL">
                    <div class="title">flex布局中显示单行显示超出部分显示省略号</div>
                </div>
                <div class="blockL">
                    <div class="title">flex布局中显示单行显示超出部分显示省略号</div>
                </div>
               
            </div>
            <div class="blockB">
                <div class="blockL">
                    <div class="title">flex布局中显示单行显示超出部分显示省略号</div>
                </div>
                <div class="blockL">
                    <div class="title">flex布局中显示单行显示超出部分显示省略号</div>
                </div>
               
            </div>
            <div class="blockB">
                <div class="blockL">
                    <div class="title">flex布局中显示单行显示超出部分显示省略号</div>
                </div>
                <div class="blockL">
                    <div class="title">flex布局中显示单行显示超出部分显示省略号</div>
                </div>
               
            </div>
        </div>

    效果图如下:

     根据需求需要对上面的内容单行显示,超过的部分显示省略号...

       相信大家的操作肯定跟我一样,给dom 添加样式如下:

     .title{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

    意想不到的效果出来了,如下:

     文字是单行显示了,但内容溢出超过容器的大小,尝试给父元素“blockL”添加 100%也无效,经上网查找给父元素添加 0有效,如下

      .blockL{
            flex: 1;
            border-left: 1px solid green;
            width: 0;  
        }

    效果图,如下:

  • 相关阅读:
    BZOJ3105: [cqoi2013]新Nim游戏 博弈论+线性基
    BZOJ3759: Hungergame 博弈论+线性基
    NOI模拟赛Day2
    期望dp BZOJ3450+BZOJ4318
    NOI模拟赛 Day1
    NOI模拟 热身赛T1
    【BZOJ4260】 Codechef REBXOR 可持久化Trie
    【BZOJ3673】&&【BZOJ3674】: 可持久化并查集 by zky 可持久化线段树
    【BZOJ3207】花神的嘲讽计划I 可持久化线段树/莫队
    【bzoj3527】[Zjoi2014]力 FFT
  • 原文地址:https://www.cnblogs.com/dzyany/p/13404859.html
Copyright © 2011-2022 走看看