移動端里面，flex 布局很好用，它能夠根據設備寬度來自動調整容器的寬度，但是最近在做項目的時候發現一個問題：

一個li里面設置了flex,flex: 0 0 33.333%,然后想讓子元素里面的文字超出flex定義寬度后自動省略。

<li>
<a href="">
<img src="http://huoche.7234.cn/images/jb51/wlqoiaxzjwk.png" alt="">
<p>小米小米小米小米小米小米小米小米小米小米小米小米</p>
</a>
</li>

ul{
display: flex;
}
li{
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333%;
flex: 0 0 33.333%;
text-align: center;
padding: 0 1.333vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 2.667vw;
}
li p{
font-size: 3.2vw;
color: #8F8E94;
text-overflow: ellipsis;
white-space: nowrap;
}

這時候會發現，p的文字可能會非常長，一些設備下需要隱藏顯示，即不換行，并留下省略符…作標記。

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

嘗試取消父元素.li的flex: 0 0 33.33%，無效。

嘗試取消ul容器的display: flex，省略號出現。

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

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

li{
flex: 0 0 33.333%;
width: 0
}

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

li{
flex: 0 0 33.333%;
overflow: hidden;
}

上面的二種方法都可以達到我們需要的效果，即給 li 設置了 flex 的值 的時候，它會動態的獲得父容器的剩余寬度，且不會被自己的子元素把內容撐開。

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