flex 布局下，css 設置文本不換行時，省略號不顯示的解決辦法

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

<div class="main">
    <img alt="" class="logo" src="pic.jpg">
    <div class="content">
        <h4 class="name">a name</h4>
        <p class="info">a info</p>
        <p class="notice">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

.notice 會非常長，一些設備下需要隱藏顯示，即不換行，並留下省略符 ... 作標記。

.main {
    display: flex;
}
.logo {
    width: 100px;
    height: 100px;
    margin: 10px;
}
.content {
    flex: 1;
}
.content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

這里會發現 text-overflow: ellipsis 不生效，省略符根本沒有出現。

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

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

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

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

更新：
如果不設置寬度， .content 可以被子節點無限撐開；因此 .notice 總有足夠的寬度在一行內顯示所有文本，也就不能觸發截斷省略的效果。

測試還有一種方法可以達到效果：

1. 給 .content 設置 overflow: hidden ；

以下方法無效：

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

以上僅在 chrome 58.0.3029.81 下測試，系統為 Ubuntu 16.04.2 LTS 。

本文基於知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議發布，歡迎引用、轉載或演繹，但是必須保留本文的署名BlackStorm以及本文鏈接http://www.cnblogs.com/BlackStorm/p/6793170.html，且未經許可不能用於商業目的。如有疑問或授權協商請與我聯系。