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

flex 布局下文本溢出省略導(dǎo)致容器撐開的解決方案

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

問題：一個 Flex 容器包含圖片（固定寬度）和文本（自適應(yīng)剩余空間）。添加文本省略樣式后，容器寬度超出預(yù)期，未完全占據(jù)可用空間（100vw），且省略號無效。這是因為即使設(shè)置了省略，瀏覽器仍會為長文本分配足夠空間顯示完整內(nèi)容，導(dǎo)致容器撐開。

根本原因在于 Flex 布局的默認(rèn)行為：子項根據(jù)內(nèi)容撐開空間。長文本未限制最小寬度，即使使用了 text-overflow: ellipsis，F(xiàn)lex 容器仍會根據(jù)文本實際內(nèi)容計算寬度。

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