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

项目中发现，在flex布局下，希望目标元素文字超出省略号时，text-overflow: ellipsis属性无效

结论就是上述只对有设置宽度的块级元素有效。也就是block或者是inline-block元素有效。前

人说过，没有什么是套一层不能解决的，所以解决方案就是：套一层flex布局

 

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

<div class="text-hide"
  style='display: flex;
  border:1px solid red;'
>

  <div style='    
      min-width: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; '        
  >
    项目中发现......
   </div>     
</div>

 

或者把代码的display:flex --->display:blobk

参考链接：

https://blog.csdn.net/dKnightL/article/details/82964410