flex布局,flex:1下的子元素overflow hidden失效問題解決方法


遇到的問題如下:在使用flex布局 使其flex:1的元素添加 margin、padding屬性時; 並且其里面的子元素超出一行省略,則在flex:1 的元素添加 min-width:0,生效,好使。

代碼如下:

<div class="flex-con">
<div class="flex-box">
<p class="9">
研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試</p>
</div>
<div class="flex-box">
<p class="9">
研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試研發測試</p>
</div>
</div>
<style>
.flex-con{
  display: flex;
  .flex-box{
  flex: 1;
  border:1px solid red;
  margin: 0 15px;
  padding: 15px;
  min-width: 0;
  p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 99%;
  }
  }
}
</style>

 

方法一:

根據flex語法,可在設置flex:1的元素(即文字超長元素.tove的父元素)設置寬度屬性,如:width:100px; 或 設置min-width:0,2個屬性的值可任選其一,寬度值可隨意設置,但必須保證小於要限制的顯示寬度,否則依舊會被撐開顯示

方法二:

可在設置flex:1的元素(即文字超長元素.tove的父元素)設置overflow:hidden;屬性,該屬性會觸發BFC(塊級元素格式化上下文)

划重點:如果頁面布局結構中有嵌套申明使用flex:1,不管是用方法一、方法二都必需在每個設置flex:1的元素上添加方法中上述對應關鍵的css屬性聲明才能生效!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM