同时使用flex、white-space和overflow的bug

写这个博客文章列表标题时遇到的bug,当flex和white-space、overflow一起用的时候,发现overflow:hidden失效了。代码如下:

1
2
3
4
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

解决办法:再加上min-width: 0属性。

1
2
3
4
5
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width:0;