Lange Texte in HTML mit CSS kürzen – text-overflow: ellipsis
Es ist noch gar nicht so lange her, da bin ich mehr oder weniger zufällig auf eine sehr nützliche, mir bis dahin völlig unbekannte,
CSS-Anweisung (text-overflow:ellipsis) gestoßen mit der man sehr einfach zu lange Texte per CSS elegant abschneiden bzw. kürzen
kann.
Die CSS-Eigenschaft text-overflow bewirkt mit der Angabe ellipsis nicht nur das der Text
innerhalb eines HTML-Elementes einfach abgeschnitten wird (overflow: hidden), sondern das am Ende des abgeschnittenen Wortes noch
zusätzlich 3 Punkte dargestellt werden – und das ganz ohne JavaScript.
Nachdem ich mich dann etwas genauer über die Anweisung text-overflow informiert habe, habe ich gelernt das diese CSS-Anweisung ursprünglich von der High-End-Browser-Schmiede Microsoft *hust* stammt, und das schon seit der Version 5.5 (1999-2000) des bei Webentwicklern recht unbeliebten Internet Explorers.
Mittlerweile kann text-overflow: ellipsis aber für alle aktuell gängigen Browser angewendet werden. Der Firefox unterstützt dies beispielsweise seit der Version 7 vollständig, Chrome schon ewig, Opera seit Version 11 und Safari seit Version 3.1. Eine ausführliche Liste welche Browser-Versionen text-overflow unterstützen (auch mobile Browser), findet ihr bei caniuse.
Verwendung
Bei der Verwendung muss man noch an ein paar kleinere Dinge (CSS) beachten:
der Text darf nicht umbrechen (white-space:nowrap)
Überlauf verstecken (overflow:hidden)
Breite auf 100% setzen (width:100%) wenn der IE6 unterstützt werden soll
und natürlich text-overflow:ellipsis
.shorten-long-text{ white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; }
Demo
Hier eine kurze Demo:
Add Comment
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comments