Flex佈局下文字超出省略卻撐開容器？如何解決？

Flex 佈局下文本溢出省略導致容器撐開的解決方案

在使用Flex 佈局時，經常會遇到這種情況：左側元素寬度固定，右側元素自適應剩餘空間。但當為右側文本添加省略號樣式（ text-overflow: ellipsis ）時，容器卻意外撐開，破壞頁面佈局。本文將分析原因並提供解決方案。

問題：一個Flex 容器包含圖片（固定寬度）和文本（自適應剩餘空間）。添加文本省略樣式後，容器寬度超出預期，未完全佔據可用空間（100vw），且省略號無效。這是因為即使設置了省略，瀏覽器仍會為長文本分配足夠空間顯示完整內容，導致容器撐開。

根本原因在於Flex 佈局的默認行為：子項根據內容撐開空間。長文本未限制最小寬度，即使使用了text-overflow: ellipsis ，Flex 容器仍會根據文本實際內容計算寬度。

解決方案：為包含文本的元素添加min-width: 0;樣式。此樣式強製文本元素的最小寬度為0，即使文本過長，也不會影響容器寬度計算。 Flex 容器將根據剩餘空間分配寬度，實現預期自適應佈局，同時文本溢出部分會被正確省略。 這就能完美解決Flex 佈局下文本溢出省略導致容器撐開的問題，達到自適應寬度和文本隱藏的預期效果。

以上是Flex佈局下文字超出省略卻撐開容器？如何解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！