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