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布局

点击链接即可预览

<div class="text-hide"
style='display: flex;
border:1px solid red;        
'
>
<div
    style='    
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    '        
>项目中发现，在flex布局下，希望目标元素文字超出省略号时，text-overflow: ellipsis属性无效，结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden，设置自身属性min-width:0也都不行。项目中发现，在flex布局下，希望目标元素文字超出省略号时，text-overflow: ellipsis属性无效，结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden，设置自身属性min-width:0也都不行。项目中发现，在flex布局下，希望目标元素文字超出省略号时，text-overflow: ellipsis属性无效，结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0、overflow: hidden，设置自身属性min-width:0也都不行。</div>     
</div>