如何解決flex布局中保持內容不超出容器的問題

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

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

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

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

<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可能會非常長，一些設備下需要隱藏顯示，即不換行，并留下省略符…作標記。

這里會發現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，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時只顯示兩個點..

關于“如何解決flex布局中保持內容不超出容器的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。