Die CSS-Eigenschaft ellipsis entraetselt text kuerzen mit stil
Ich will, dass Text sauber aussieht. Nicht abgeschnitten wie ein Fehler, sondern bewusst gekürzt. Genau dafür nutze ich ellipsis. Die CSS-Eigenschaft ellipsis entraetselt text kuerzen mit stil, weil sie aus einem chaotischen Layout ein kontrolliertes macht.
Was macht CSS Ellipsis überhaupt?
Wenn ein Text zu lang für seinen Container ist, kann CSS ihn mit drei Punkten am Ende abschneiden: …. Das ist kein Zufall, sondern ein klares Signal an den Nutzer: Hier geht es weiter, aber der Platz reicht nicht aus.
Ich nutze das vor allem bei:
- Navigationen
- Karten-Layouts
- Tabellenzellen
- Listen mit festen Breiten
- Buttons mit dynamischem Text
Das Ziel ist immer gleich: lesbar bleiben, ohne das Design zu sprengen.
So funktioniert die CSS-Eigenschaft Ellipsis
Für eine einzelne Textzeile braucht es normalerweise drei Dinge:
- white-space: nowrap; – verhindert den Zeilenumbruch
- overflow: hidden; – versteckt den überstehenden Inhalt
- text-overflow: ellipsis; – zeigt die drei Punkte an
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Wichtig: ellipsis alleine reicht nicht. Die Eigenschaft funktioniert nur, wenn die anderen Bedingungen stimmen. Außerdem braucht das Element eine definierte Breite, sonst gibt es nichts zu kürzen.
Ein einfaches Beispiel aus der Praxis
Stell dir eine Produktkarte vor. Der Titel ist mal kurz, mal absurd lang. Ohne Ellipsis bricht dein Layout. Mit Ellipsis bleibt es stabil.
<div class="card-title">Extrem langer Produktname, der sonst alles sprengt</div>.card-title {
width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Ergebnis: Der Text bleibt sauber. Das Design bleibt sauber. Ich spare mir unnötige Umbrüche und visuelles Chaos.
Wann ich Ellipsis einsetze und wann nicht
Ich nutze Ellipsis nicht überall. Das wäre schlechter UX. Ich setze es gezielt ein, wenn der volle Text nicht kritisch ist oder der Nutzer ihn anders einsehen kann.
Gut geeignet für
- Titel in limitierten Bereichen
- Dateinamen
- Meta-Infos
- Tabellen mit fester Spalte
Weniger geeignet für
- Rechtstexte
- Wichtige Fehlermeldungen
- Inhalte, bei denen jede Information zählt
Meine Regel ist simpel: Wenn Kürzen Informationen kostet, suche ich eine andere Lösung.
Mehrzeilige Ellipsis: geht das?
Ja, aber nicht mit derselben Standard-Lösung. Eine mehrzeilige Kürzung ist komplexer und je nach Browser unterschiedlich. Das ist der Punkt, an dem viele Entwickler unnötig Zeit verlieren.
Für moderne Layouts kann ich mit WebKit-basierten Ansätzen arbeiten, zum Beispiel mit -webkit-line-clamp. Das ist praktisch, wenn ich genau zwei oder drei Zeilen zeigen will.
.multi-line-truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}Aber klar: Das ist kein perfekter Standard für alle Fälle. Ich prüfe immer, ob mein Design das wirklich braucht.
Die häufigsten Fehler bei text-overflow: ellipsis
Die meisten Probleme sind banal. Genau deshalb sind sie so nervig. Hier sind die typischen Fehler, die ich immer wieder sehe:
- Kein overflow: hidden; gesetzt
- white-space fehlt
- Das Element hat keine feste oder begrenzte Breite
- Es wird auf ein Inline-Element angewendet, das so nicht sauber funktioniert
- Der Container ist zu flexibel und kann einfach wachsen
Mein Ansatz:
- Ich prüfe zuerst die Breite
- Dann setze ich den Overflow
- Dann kontrolliere ich den Zeilenumbruch
- Zum Schluss teste ich mit echten Langtexten
Warum Ellipsis UX verbessern kann
Gutes UI ist oft unsichtbar. Ellipsis hilft mir, Ordnung zu schaffen. Nutzer sehen auf einen Blick die Struktur, statt von überlangen Texten erschlagen zu werden.
Das ist nicht nur Design. Das ist Informationskontrolle. Ich zeige, was wichtig ist, und verstecke den Rest nur dann, wenn es sinnvoll ist.
Meine Best Practices für sauberes Text kürzen mit Stil
- Immer mit echtem Inhalt testen – nicht nur mit Beispieltext
- Breite definieren – sonst passiert nichts
- Kontext beachten – nicht jeder Text darf gekürzt werden
- Bei Bedarf Tooltip oder Detailansicht anbieten – Nutzer sollen den vollen Inhalt finden können
- Mobilgeräte prüfen – dort wird Platz schnell knapp
Wenn ich das sauber umsetze, wirkt mein Interface präzise statt überladen.
Hilfreiche Ressourcen
Wenn du die Technik tiefer verstehen willst, sind diese offiziellen Ressourcen sinnvoll:
Fazit
Ich sehe Ellipsis nicht als Deko, sondern als Werkzeug. Richtig eingesetzt, macht sie Interfaces sauberer, stabiler und leichter lesbar. Die CSS-Eigenschaft Ellipsis entraetselt text kuerzen mit stil, weil sie aus langen Texten kontrollierte, elegante UI-Elemente macht. Und genau darum setze ich sie ein.