近段時間，由於公司工作安排，一直沒有時間更新博客，今天在寫頁面的時候，遇到了一些問題，做一下記錄，話不多說開始。
在現在的前端樣式開發中，相信大家已經對flex佈局不陌生了吧，在頁面佈局中，所謂方便快捷，但是在開發中，我遇到一個問題：
就是在一個設置了 flex:1 的容器中，如果文字很長，這時候文字就會超出容器，而不是呆在設置好的動態剩餘的空間中。由於實際項目的比較複雜，不好拿出來說，這裏就把問題簡化描述如下：
界面代碼 小程序
css：
使用的ui框架中的樣式，設置不得換行，導致寬度溢出。
.van-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
展示效果：
一些設備下需要隱藏顯示，即不換行，並留下省略符…作標記。
這裏會發現text-overflow: ellipsis不生效，省略符根本沒有出現。而且因爲設置了 nowrap 會發現文字會將 content 撐開，導致內容超出了屏幕。所以必須要解決這個問題。
嘗試取消父元素.content的flex: 1，無效。
嘗試取消.main容器的display: flex，省略號出現。
因此猜測是flex佈局的問題，進一步猜測省略符需要對父元素限定寬度。
嘗試對父元素.content設置width: 100%無效，但是設置width: 0可行。即：
.docInfo{
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，雖然寬度受限，但在特定寬度下省略符…顯示不全，有時只顯示兩個點..