詳解flex布局中保持內(nèi)容不超出容器的解決辦法

在移動(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"> <h4 class="name">a name</h4> <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è)備下需要隱藏顯示,即不換行,并留下省略符…作標(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)嗍÷缘男Чy(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,雖然寬度受限,但在特定寬度下省略符…顯示不全,有時(shí)只顯示兩個(gè)點(diǎn)..
到此這篇關(guān)于詳解flex布局中保持內(nèi)容不超出容器的解決辦法的文章就介紹到這了,更多相關(guān)flex保持內(nèi)容不超出容器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
flex布局被子元素?fù)伍_(kāi)如何保持內(nèi)容不超出容器的方法
這篇文章主要介紹了flex布局被子元素?fù)伍_(kāi)如何保持內(nèi)容不超出容器的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面2019-06-25flex子元素內(nèi)容超出盒子容器寬度問(wèn)題解決
在使用彈性布局的時(shí)候,必然會(huì)有碰到分配子元素空間問(wèn)題,本文主要介紹了flex子元素內(nèi)容超出盒子容器寬度問(wèn)題解決,感興趣的可以了解一下2023-04-24