Warum funktioniert „text-overflow: ellipsis' nicht in einem Flex-Container?

Abschneiden von Text mit Textüberlauf im Flex-Layout

Die Implementierung von text-overflow: ellipsis zum Abschneiden von Text in einem Flex-Container führt oft zu dem Auslassungspunkte fehlen. Dies wird deutlich, wenn man das Ergebnis mit demselben Code ohne Flexbox vergleicht.

CSS-Code:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

HTML-Code:

<h1>Flexible Boxes</h1>
<div class="flex-container">

Beobachtetes Problem:

Das erwartete Ergebnis, was den Text auf „ThisIsASam…“ kürzen sollte, wird nicht erreicht. Stattdessen wird in der Ausgabe „ThisIsASamp“ angezeigt.

Ursache:

Das Problem tritt auf, weil die Textüberlaufeigenschaft auf die untergeordneten Flex-Container und nicht auf den übergeordneten Container angewendet werden muss . Dies liegt daran, dass der übergeordnete Container eine einzelne Textzeile enthält, die nicht abgeschnitten werden muss.

Lösung:

Um dieses Problem zu lösen, sollten separate Klassen verwendet werden damit die Kinder die Kürzung kontrollieren können.

CSS Code:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Dieser Ansatz stellt sicher, dass die flexiblen untergeordneten Elemente über die erforderlichen Stile zum Abschneiden des Textes verfügen, während der übergeordnete Container weiterhin das gewünschte Layout beibehalten kann.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „text-overflow: ellipsis' nicht in einem Flex-Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!