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:

  

    Hier steht ein sehr langer Text