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.

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

  2. Das ist ja mal ein klasse Tipp, genau das, was ich gesucht habe. So muss man nicht mit PHP rumfummeln, um zu lange Strings abzuschneiden. Diese CSS-Lösung ist perfekt und sie funktioniert, zumindest unter Vivaldi und Firefox (ich habe bisher nur mit diesen beiden Browsern getestet). Danke schön!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.