成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

flex布局被子元素?fù)伍_，如何保持內(nèi)容不超出容器

hearaway / 2085人閱讀

摘要：而且因?yàn)樵O(shè)置了會(huì)發(fā)現(xiàn)文字會(huì)將撐開，導(dǎo)致內(nèi)容超出了屏幕。嘗試取消父元素的，無效。因此猜測是布局的問題，進(jìn)一步猜測省略符需要對父元素限定寬度。

移動(dòng)端里面，flex 布局很好用，它能夠根據(jù)設(shè)備寬度來自動(dòng)調(diào)整容器的寬度，但是最近在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)問題：

一個(gè)li里面設(shè)置了flex,flex: 0 0 33.333%,然后想讓子元素里面的文字超出flex定義寬度后自動(dòng)省略。

  • 
    
         
        
    小米小米小米小米小米小米小米小米小米小米小米小米
    
        

    • ul{
     display: flex;
}
li{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    text-align: center;
    padding: 0 1.333vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 2.667vw;
}
li p{
    font-size: 3.2vw;
    color: #8F8E94;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    這時(shí)候會(huì)發(fā)現(xiàn)，p的文字可能會(huì)非常長，一些設(shè)備下需要隱藏顯示，即不換行，并留下省略符…作標(biāo)記。
    這里會(huì)發(fā)現(xiàn)text-overflow: ellipsis不生效，省略符根本沒有出現(xiàn)。而且因?yàn)樵O(shè)置了 nowrap 會(huì)發(fā)現(xiàn)文字會(huì)將 content 撐開，導(dǎo)致內(nèi)容超出了屏幕。所以必須要解決這個(gè)問題。

    嘗試取消父元素.li的flex: 0 0 33.33%，無效。 
    嘗試取消ul容器的display: flex，省略號出現(xiàn)。

    因此猜測是flex布局的問題，進(jìn)一步猜測省略符需要對父元素限定寬度。
    嘗試對父元素li設(shè)置width: 100%無效，但是設(shè)置width: 0可行。即：

    li{
    flex: 0 0 33.333%;
    width: 0
}

    如果不設(shè)置寬度，li可以被子節(jié)點(diǎn)無限撐開；因此p總有足夠的寬度在一行內(nèi)顯示所有文本，也就不能觸發(fā)截?cái)嗍÷缘男Чy試還有一種方法可以達(dá)到效果：

    li{
    flex: 0 0 33.333%;
    overflow: hidden;
}

    上面的二種方法都可以達(dá)到我們需要的效果，即給 li 設(shè)置了 flex 的值 的時(shí)候，它會(huì)動(dòng)態(tài)的獲得父容器的剩余寬度，且不會(huì)被自己的子元素把內(nèi)容撐開。

    給html, body設(shè)置max-width，元素似乎能強(qiáng)行撐開頁寬； 
    給body設(shè)置overflow，頁寬不能被撐開了，但元素寬度還在，即元素本身還是溢出； 
    給html, body同時(shí)設(shè)置max-width和overflow，頁寬限定在max-width內(nèi)，元素本身還是溢出； 
    給.main容器設(shè)置overflow: hidden，同理.main是不溢出了，.notice本身還是溢出； 
    給.notice元素設(shè)置width或max-width，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時(shí)只顯示兩個(gè)點(diǎn)..

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114833.html

    相關(guān)文章

    • 常用CSS布局

      摘要：此時(shí)，是不好用的，因?yàn)樗荒軕?yīng)用于清除左側(cè)或右側(cè)的浮動(dòng)。而是傲嬌的小公舉，有她自己的布局規(guī)則內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置。用來在內(nèi)部元素超出時(shí)顯示進(jìn)度條。這樣在頁面高度變化，或者內(nèi)部的高度變化時(shí)，都始終可以保持正常的三行布局。 1.導(dǎo)航條垂直居中 導(dǎo)航條nav 從左到右分為 nav-left , nav-mid , nav-mid ，怎樣達(dá)到從左到右依次排列，且全部垂直居中的效...

      mikasa 評論0 收藏0

    • 常用CSS布局

      摘要：此時(shí)，是不好用的，因?yàn)樗荒軕?yīng)用于清除左側(cè)或右側(cè)的浮動(dòng)。而是傲嬌的小公舉，有她自己的布局規(guī)則內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置。用來在內(nèi)部元素超出時(shí)顯示進(jìn)度條。這樣在頁面高度變化，或者內(nèi)部的高度變化時(shí)，都始終可以保持正常的三行布局。 1.導(dǎo)航條垂直居中 導(dǎo)航條nav 從左到右分為 nav-left , nav-mid , nav-mid ，怎樣達(dá)到從左到右依次排列，且全部垂直居中的效...

      mozillazg 評論0 收藏0

    • 對Flex布局的總結(jié)與思考

      摘要：主軸方向的多余空間的出現(xiàn)是因?yàn)槿萜鲗挾仍仨?xiàng)寬度之和。對空間分配的思考是如何計(jì)算項(xiàng)的寬度的所有項(xiàng)先按照原始寬度在容器中排列。開發(fā)時(shí)布局的一般流程根據(jù)設(shè)計(jì)，確定需要多少行來顯示所有內(nèi)容，然后確定每一行有哪些項(xiàng)。對每一項(xiàng)，定義其樣式。 閱讀本文之前最好對flex布局有基本了解，可以通過參考資料中列舉的資源來學(xué)習(xí)。 flex布局規(guī)范的設(shè)計(jì)目標(biāo) 一維布局模型(one-dimensional...

      springDevBird 評論0 收藏0

    • CSS6：flex布局

      摘要：主要用來做橫向的布局。元素的布局學(xué)習(xí)我分成兩個(gè)部分，第一個(gè)部分是元素布局。以下幾個(gè)屬性影響著元素的布局。詳細(xì)還是看分鐘徹底弄懂布局講的非常明白。的時(shí)候，伸縮時(shí)需要考慮，按照進(jìn)行等比例伸縮。布局套路學(xué)習(xí)布局教程實(shí)例篇 前言：這是我看過最好的flex布局教程：30分鐘徹底弄懂flex布局 傳統(tǒng)的布局方法與flex屬性通覽 showImg(https://segmentfault.com/i...

      Jioby 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <