Texte mit CSS abschneiden und auspunkten

Geht das überhaupt? Ja, es ist möglich. Texte lassen sich mit der CSS Eigenschaft text-overflow auspunkten. Leider beschränkt sich diese Funktionalität jedoch auf einzeilige Texte. Perfekt für einzeilige Teaser in Listen, Tabellen oder Button-Beschriftungen. Den kompletten Text kann man beispielsweise bei Mouseover mit Hilfe eines Tooltips präsentieren.

Die Vorteile?

  • Der Aufwand ist verschwindend gering
  • Suchmaschinen bekommen den kompletten Content
  • Bei mehrzeiligen Auflistungen entsteht keine „wellenartige“ Darstellung wie bei (meist serverseitigen) „Nach-X-Buchstaben-Abschneiden“ Lösungen

Ich persönlich bevorzuge den Weg einer eigens dafür angelegten CSS-Klasse, die im kompletten Projekt universell einsetzbar ist:

.text-overflow {
	display: block; /* in seltenen Faellen in Kombination mit "(max-)width" auch "inline-block" */
	overflow: hidden;
	-moz-text-overflow: ellipsis;
			 text-overflow: ellipsis;
	white-space: nowrap;
}

Neben ellipsis gibt es noch weitere mögliche Werte:

Wert Beschreibung
clip schneidet den Text einfach ab
ellipsis Punktet abgeschnittenen Text aus „…“
string Setzt einen selbstdefinierten String hinter den abgeschnittenen Text
initial Übernimmt den default Wert
inherit Übernimmt den Wert vom Elternelement

Kommentare

Keine Kommentare vorhanden.