遇到的問題如下:在使用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屬性聲明才能生效!!!