flex布局文本不換行不顯示省略號的解決方法

 

假如有這么一個元素，左側是一個固定寬度頭像，右側是內容且內容一行顯示不下。

<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>

在某些時候我們需要讓右側內容固定不換行（比如title太長的情況）

.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或者overflow:hidden 可行。即：

.content {
    flex: 1;
    width: 0;
　　//overflow: hidden;

}