Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / ineresantes / Texte-elegant-mit-CSS-kuerzen.php

Lange Texte in HTML mit CSS kürzen – text-overflow: ellipsis

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
Quelltext
1
2
3
4
5
6
.shorten-long-text{
   white-space: nowrap;
   overflow: hidden;
   width: 100%;
   text-overflow: ellipsis;
}

Demo

Hier eine kurze Demo:

Hier steht ein sehr langer Text

Quelltext
1
2
3
4
5
<div style="width: 200px; border: 1px solid red; padding: 2px 10px;">
  <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
    Hier steht ein sehr langer Text
  </p>
</div>