Warum funktioniert „text-overflow: ellipsis' mit Flexbox nicht wie erwartet?

text-overflow verhält sich nicht mit Flexbox

In diesem Beispiel haben wir einen Flex-Container mit dem Textinhalt „ThisIsASampleText“. Wenn wir die Eigenschaft „display“ auf „flex“ und „text-overflow“ auf „ellipsis“ setzen, erwarten wir, dass der Text abgeschnitten wird, aber er funktioniert nicht wie beabsichtigt.

Beim Überprüfen des Codes stellen wir fest dass die Flex-Eigenschaft auf das Containerelement angewendet wird. Allerdings sollten Flexbox-Stile auf untergeordnete Elemente angewendet werden, um deren Layout und Eigenschaften zu beeinflussen.

Um dieses Problem zu beheben, können wir den „Textüberlauf“ und verwandte Stile in eine separate Klasse für die untergeordneten Flexboxen verschieben. Hier ist der geänderte Code:

.flex-container {<br> display: flex;<br> text-align: left;<br>}</p>
<p>.flex-child {<br>white-space: nowrap;<br>overflow: versteckt;<br>text-overflow: Auslassungspunkte;<br>}</p>
<p><h1>Flexible Boxen</h1><br><div> <span class="flex-child">ThisIsASampleText</span><br>&lt ;/div>

Durch Bewerbung Mit den Kürzungsstilen für die Klasse „.flex-child“ kürzen wir den Text jetzt korrekt auf „ThisIsASam...“ im Flex-Container. Eine ausführliche Erklärung finden Sie im unten verlinkten Referenzartikel von CSS Tricks.

Referenz: https://css-tricks.com/flexbox-truncated-text/

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