如何使用flex布局保持內(nèi)容不超出容器

這篇文章主要介紹了如何使用flex布局保持內(nèi)容不超出容器，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

移動(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)省略。

<li>
    <a href="">
        <img src="https://cache.yisu.com/upload/information/20210311/295/5993.png" alt=""> 
        <p>小米小米小米小米小米小米小米小米小米小米小米小米</p>
    </a>
</li>

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ì)非常長(zhǎng)，一些設(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%，無(wú)效。

嘗試取消ul容器的display: flex，省略號(hào)出現(xiàn)。

因此猜測(cè)是flex布局的問題，進(jìn)一步猜測(cè)省略符需要對(duì)父元素限定寬度。

嘗試對(duì)父元素li設(shè)置width: 100%無(wú)效，但是設(shè)置width: 0可行。即：

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

如果不設(shè)置寬度，li可以被子節(jié)點(diǎn)無(wú)限撐開；因此p總有足夠的寬度在一行內(nèi)顯示所有文本，也就不能觸發(fā)截?cái)嗍÷缘男Ч?。測(cè)試還有一種方法可以達(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)行撐開頁(yè)寬；

• 給body設(shè)置overflow，頁(yè)寬不能被撐開了，但元素寬度還在，即元素本身還是溢出；

• 給html, body同時(shí)設(shè)置max-width和overflow，頁(yè)寬限定在max-width內(nèi)，元素本身還是溢出；

• 給.main容器設(shè)置overflow: hidden，同理.main是不溢出了，.notice本身還是溢出；

• 給.notice元素設(shè)置width或max-width，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時(shí)只顯示兩個(gè)點(diǎn)..

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用flex布局保持內(nèi)容不超出容器”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!