如何解決flex布局中保持內(nèi)容不超出容器的問(wèn)題-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何解決flex布局中保持內(nèi)容不超出容器的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),尤溪企業(yè)網(wǎng)站建設(shè),尤溪品牌網(wǎng)站建設(shè),網(wǎng)站定制,尤溪網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,尤溪網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

在移動(dòng)端，flex 布局很好用，它能夠根據(jù)設(shè)備寬度來(lái)自動(dòng)調(diào)整容器的寬度，用起來(lái)很方便，已經(jīng)越來(lái)越離不開(kāi)它，但是最近在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題。

就是在一個(gè)設(shè)置了 flex:1 的容器中，如果文字很長(zhǎng)，這時(shí)候文字就會(huì)超出容器，而不是呆在設(shè)置好的動(dòng)態(tài)剩余的空間中。由于實(shí)際項(xiàng)目的比較復(fù)雜，不好拿出來(lái)說(shuō)，這里就把問(wèn)題簡(jiǎn)化描述如下：

大致是有一個(gè)main容器是flex布局，左邊一個(gè)logo固定寬高，右邊content動(dòng)態(tài)寬度。

<div class="main">
    <img alt="" class="logo" src="pic.jpg">
    <div class="content">
        <h5 class="name">a name</h5>
        <p class="info">a info</p>
        <p class="notice">This is notice content.</p>
    </div>
</div>
.main {
    display: flex;
}
.logo {
    width: 100px;
    height: 100px;
    margin: 10px;
}
.content {
    flex: 1;
}
.content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice可能會(huì)非常長(zhǎng)，一些設(shè)備下需要隱藏顯示，即不換行，并留下省略符&hellip;作標(biāo)記。

這里會(huì)發(fā)現(xiàn)text-overflow: ellipsis不生效，省略符根本沒(méi)有出現(xiàn)。而且因?yàn)樵O(shè)置了 nowrap 會(huì)發(fā)現(xiàn)文字會(huì)將 content 撐開(kāi)，導(dǎo)致內(nèi)容超出了屏幕。所以必須要解決這個(gè)問(wèn)題。

嘗試取消父元素.content的flex: 1，無(wú)效。
嘗試取消.main容器的display: flex，省略號(hào)出現(xiàn)。

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

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

.content {
    flex: 1;
    width: 0;
}

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

.content {
    flex: 1;
    overflow: hidden；
}

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

經(jīng)過(guò)測(cè)試，以下的方法是無(wú)效的：

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

關(guān)于“如何解決flex布局中保持內(nèi)容不超出容器的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享題目：如何解決flex布局中保持內(nèi)容不超出容器的問(wèn)題-創(chuàng)新互聯(lián)
URL標(biāo)題：http://muchs.cn/article44/dcjihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、域名注冊(cè)、Google、搜索引擎優(yōu)化、網(wǎng)站改版、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名