Flex 中文本截断

Text to truncate here.

Other stuff.

.flex-child > h2 {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

When I first ran into this problem, I found the solution via a Pen by AJ Foster. He writes:

According to a draft spec, the above text should not fully collapse when the flex container is resized down. Because .subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want.

I found this behavior consistent across Chrome, Opera, and Firefox. Safari was shrinking/truncating even without the min-width (against spec, I think).

另外 flex-child 使用overflow: hidden; 也行