flex 布局子內容被撐開


描述一種情況,父元素 flex 布局,子元素有一行文字,將其設置為不換行隱藏后顯示省略號,但實際並不是想象的那樣,而導致布局變形。

 

這種情況是因為 flex 布局特性,子內容優先被內容撐開使得文字不隱藏。

 

 

解決:將該元素的寬度設置為 0 ,然后使用 flex:1 樣式,將寬度交給 flex 布局來決定,最終子元素不會被內容撐開,達到想要的效果。。高度不對設置高度0

 

 

受瀏覽器版本的限制,可能谷歌71沒問題,84會出現


免責聲明!

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



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