flex布局下文字超出省略号代替不起作用解决方法

项目中发现，在flex布局下，希望目标元素文字超出省略号时，text-overflow: ellipsis属性无效，结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden，设置自身属性min-width:0也都不行。

 

text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;

结论就是上述只对有设置宽度的块级元素有效。也就是block或者是inline-block元素有效。前人说过，没有什么是套一层不能解决的，所以解决方案就是：套一层flex布局

 

    

        
应某个阴阳怪气的评论，加上解决方案。应某个阴阳怪气的评论，加上解决方案。应某个阴阳怪气的评论，加上解决方案。