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 id="Flexible-Boxes">Flexible Boxes</h1>
<div class="flex-container">
<p><strong>Beobachtetes Problem:</strong></p>
<p>Das erwartete Ergebnis, was den Text auf „ThisIsASam…“ kürzen sollte, wird nicht erreicht. Stattdessen wird in der Ausgabe „ThisIsASamp“ angezeigt.</p>
<p><strong>Ursache:</strong></p>
<p>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.</p>
<p><strong>Lösung:</strong></p>
<p>Um dieses Problem zu lösen, sollten separate Klassen verwendet werden damit die Kinder die Kürzung kontrollieren können.</p>
<p><strong>CSS Code:</strong></p>
<pre class="brush:php;toolbar:false">.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.