Textüberlauf - CSS-Tricks | CSS-Almanach 2025

Die text-overflowEigenschaft in CSS behandelt Situationen, in denen Text abgeschnitten wird, wenn er über das Feld des Elements läuft. Es kann abgeschnitten (dh abgeschnitten, ausgeblendet), ein Auslassungszeichen ('…', Unicode-Bereichswert U + 2026) oder eine vom Autor definierte Zeichenfolge angezeigt werden (keine aktuelle Browserunterstützung für vom Autor definierte Zeichenfolgen).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Beachten Sie, dass text-overflownur dann auftritt , wenn der Behälter overflowEigenschaft den Wert hat hidden, scrolloder autound white-space: nowrap;.

Textüberlauf kann nur bei Elementen auf Block- oder Inline-Blockebene auftreten, da das Element eine Breite haben muss, um übergelaufen zu werden. Der Überlauf erfolgt in der Richtung, die durch die Richtungseigenschaft oder verwandte Attribute bestimmt wird.

Die folgende Demo zeigt das Verhalten der text-overflowEigenschaft einschließlich aller möglichen Werte. Browser-Unterstützung variiert!

Schauen Sie sich diesen Stift an!

Durch Einstellen overflowauf scrolloder autowerden Bildlaufleisten angezeigt, um den zusätzlichen Text anzuzeigen, während dies hiddennicht der Fall ist . Der ausgeblendete Text kann durch Auswahl der Ellipsen ausgewählt werden.

Altes Zeug

Eine alte Version der Spezifikation besagt, dass Sie eine URL zu einem Bild für die Auslassungspunkte verwenden könnten, aber es sieht so aus, als ob diese gelöscht wurde.

Es gibt beispielsweise eine Syntax mit zwei Werten text-overflow: ellipsis ellipsis;, die den Überlauf auf der linken und rechten Seite desselben Containers steuert. Ich bin mir nicht sicher, wie das möglich wäre. Vielleicht zentrierter Text in einem zu kleinen Container? Die neue Spezifikation besagt, dass dies sowie die Definition einer Zeichenfolge "gefährdet" sind.

Ich bin mir nicht sicher, woher ich komme ellipsis-word. Es ist nicht in der Spezifikation oder in einer anderen Dokumentation als auf WebPlatform.org enthalten.

Die text-overflowEigenschaft war früher eine Abkürzung für die Kombination von text-overflow-modeund text-overflow-ellipsis, aber nicht mehr, und diese separaten Eigenschaften existieren nicht.