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;

}