css text-overflow中与block中使用方式略有不同， 此处记录下。
文本无法overflow本质原因是flex布局下子元素非直接文本导致， 如果直接文本和普通block没有区别。
<div class="flex-parent">
<div class="flex-child">
Text to truncate here.
</div>
<div class="flex-child">
Other stuff.
</div>
</div>.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}以上能正常truncated
但是， 若flex下存在子元素如下
<div class="flex-parent">
<div class="flex-child">
<h2>Text to truncate here.</h2>
</div>
<div class="flex-child">
Other stuff.
</div>
</div>.flex-child > h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}使用
min-width: 0
.flex-child > h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}