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
.shorten-long-text{
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
}

Demo

Hier eine kurze Demo:

Hier steht ein sehr langer Text

<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>

Veröffentlicht von

FrontEnd-Entwickler bei der Lovion GmbH in Dortmund. Schwerpunkte sind neben HTML, CSS, JavaScript und CMS vor allem UI/UX und Grafikdesign/Marketing.

2 Kommentare » Schreibe einen Kommentar

  1. Toller Tipp, ich möchte noch anmerken, dass das ganze nur funktioniert, wenn display auf block, inline-block, table-caption oder list-item gesetzt ist.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.