flex佈局下，將內容限定在容器內（如內容超出以省略號顯示）的實現方案
摘要：
當文字超出容器寬度時，以省略號顯示，這一需求在專案中十分常見，但是在flex佈局下，可能會遇到問題，如省略號不顯示，內容超出容器等問題，本文通過demo測試案例，記錄下問題及解決方案。
<!DOCTYPE html>
<html>
<head>
...
當文字超出容器寬度時，以省略號顯示，這一需求在專案中十分常見，但是在flex佈局下，可能會遇到問題，如省略號不顯示，內容超出容器等問題，本文通過demo測試案例，記錄下問題及解決方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width: 200px;
display: flex;
}
.div1, .div2 {
flex: 1;/*佔比，最小寬度*/
border: 1px solid blue;
}
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
<div class="div2">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
</body>
</html>
如上程式碼所示，我們發現，文字內容並沒有被限制在flex容器裡面，以省略號顯示，經過除錯發現，flex水平佈局的容器，flex的值表示的是寬度佔比，同時，類似於設定了一個最小寬度min-width。（此時，當給容器的寬設定了一個小於佔比 * 總寬的width值，是起不到作用的，但是設定了一個大於佔比 * 總寬的width值時，寬度有效，並撐開外部容器。如果不設定寬度值，則當內容大於佔比時，容器仍由內容撐開）。
有了以上實踐理解之後，得到解決方案如下：
- 為內容的父級容器（本例中是.div1, .div2）設定overflow: hidden;
- 為內容的父級容器（本例中是.div1, .div2）設定一個小於佔比的寬度，如width: 0;