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”添加width: 100%也無效，經上網查找給父元素添加width: 0有效，如下

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

效果圖，如下：