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

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

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

a name

a info

This is notice content.

.main {

display: flex;

}

.logo {

width: 100px;

height: 100px;

margin: 10px;

}

.content {

flex: 1;

}

.content > * {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

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

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

嘗試取消父元素.content的flex: 1，無效。

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

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

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

.content {

flex: 1;

width: 0;

}

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

.content {

flex: 1;

overflow: hidden；

}

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

經(jīng)過測試，以下的方法是無效的：

給html, body設(shè)置max-width，元素似乎能強行撐開頁寬；

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

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

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

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

到此這篇關(guān)于詳解flex布局中保持內(nèi)容不超出容器的解決辦法的文章就介紹到這了,更多相關(guān)flex保持內(nèi)容不超出容器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。