Der Text unter Flex -Layout wird weggelassen, aber der Behälter wird geöffnet? Wie löst ich es?

Lösungen für das Auslassen des Textüberlaufs unter Flex -Layout, die eine Behälterausdehnung verursachen

Bei Verwendung von Flex -Layout begegnen Sie häufig auf diese Situation: Die linke Elementbreite ist festgelegt und das rechte Element passt sich dem verbleibenden Raum an. Beim Hinzufügen eines Ellipsis-Stils ( text-overflow: ellipsis ) zum richtigen Text wird der Container versehentlich geöffnet, wodurch das Seitenlayout zerstört wird. Dieser Artikel wird die Ursachen analysieren und Lösungen bereitstellen.

Problem: Ein Flex -Container enthält Bilder (feste Breite) und Text (adaptiver verbleibender Raum). Nach dem Hinzufügen von Textablassstil übertrifft die Containerbreite die Erwartungen und belegt den verfügbaren Platz (100 VW) nicht vollständig, und die Ellipsis ist ungültig. Dies liegt daran, dass der Browser auch dann genügend Speicherplatz für einen langen Text bereitstellt, um den vollständigen Inhalt anzuzeigen, wodurch der Container geöffnet wird.

Die Grundursache ist das Standardverhalten des Flex -Layouts: Kinder öffnen Platz basierend auf Inhalten. Die minimale Breite ist nicht auf lange Text beschränkt, und selbst wenn text-overflow: ellipsis verwendet wird, berechnet der Flex-Container die Breite auch basierend auf dem tatsächlichen Inhalt des Textes.

Lösung: Hinzufügen min-width: 0; Stil zum Element, das Text enthält. Dieser Stil erzwingt die minimale Breite des Textelements 0, auch wenn der Text zu lang ist, wirkt sich die Berechnung der Behälterbreite nicht aus. Der Flex -Behälter verteilt die Breite gemäß dem verbleibenden Raum und erreicht das erwartete adaptive Layout, während der Textüberlaufteil korrekt weggelassen wird. Dies kann das Problem der Containerausdehnung perfekt lösen, die durch die Auslassung von Textüberlauf unter Flex -Layout verursacht wird und den erwarteten Effekt der adaptiven Breite und des Textverschlusses erzielt.

Das obige ist der detaillierte Inhalt vonDer Text unter Flex -Layout wird weggelassen, aber der Behälter wird geöffnet? Wie löst ich es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!