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

(mehr …)


Tab-Weite mit CSS korrigieren

Für Code-Darstellungen auf Websites ist die voreingestellte Tabulator-Weite viel zu breit, schon bei kurzen Beispielen wirkt der angezeigte Code unübersichtlich:

<div>
				<div>…</div>
				…
</div>

Zum manipulieren der Tabulator-Weite gibt es mit CSS3 nun die Eigenschaft tab-size:

pre {
	-webkit-tab-size: 2;
		 -moz-tab-size: 2;
			 -o-tab-size: 2;
					tab-size: 2;
}
<div>
	<div>…</div>
	…
</div>

Wie an den Vendor-Prefixes gut zu erkennen ist, hat diese Eigenschaft leider noch nicht in allen Browsern Einzug erhalten. Abhilfe können hier JavaScript-Polyfills (1, 2) schaffen.