div動态寬度_解決flex布局内容超出盒子寬度問題

在移動端，flex 布局很好用，它能夠根據裝置寬度來自動調整容器的寬度，用起來很友善，已經越來越離不開它，但是最近在做項目的時候發現一個問題。

就是在一個設定了 flex:1 的容器中，如果文字很長，這時候文字就會超出容器，而不是呆在設定好的動态剩餘的空間中。

例子：

大緻是有一個main容器是flex布局，左邊一個logo固定寬高，右邊content動态寬度。

<
           

.notice可能會非常長，一些裝置下需要隐藏顯示，即不換行，并留下省略符…作标記。

這裡會發現text-overflow: ellipsis不生效，省略符根本沒有出現。而且因為設定了 nowrap 會發現文字會将 content 撐開，導緻内容超出了螢幕。是以必須要解決這個問題。

嘗試取消父元素.content的flex: 1，無效。 嘗試取消.main容器的display: flex，省略号出現。

是以猜測是flex布局的問題，進一步猜測省略符需要對父元素限定寬度。

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

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

如果不設定寬度，.content可以被子節點無限撐開；是以.notice總有足夠的寬度在一行内顯示所有文本，也就不能觸發截斷省略的效果。測試還有一種方法可以達到效果：

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

上面的二種方法都可以達到我們需要的效果，即給 content 設定了 flex 為 1 的時候，它會動态的獲得父容器的剩餘寬度，且不會被自己的子元素把内容撐開。

經過測試，以下的方法是無效的：

給html, body設定max-width，元素似乎能強行撐開頁寬； 給body設定overflow，頁寬不能被撐開了，但元素寬度還在，即元素本身還是溢出； 給html, body同時設定max-width和overflow，頁寬限定在max-width内，元素本身還是溢出； 給.main容器設定overflow: hidden，同理.main是不溢出了，.notice本身還是溢出； 給.notice元素設定width或max-width，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時隻顯示兩個點..

作者：Thesand

連結：https://www.jianshu.com/p/a02657161e71

來源：簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。