Türchen #15: text-overflow

von

Da isser wieder!

Türchen #15 Heute ist zwar schon der 24. aber hier kommt erst das 15. Türchen. Ich wünsche euch und euren Familien ein schönes Fest und hoffe ihr vergebt mir meinen Rückstand bezüglich des Adventskalenders. Natürlich werde ich versuchen ihn trotz allem noch dieses Jahr zu komplettieren, wir werden sehen, ob das klappt. Die letzten Tage ist wenig passiert, da ich durch diverse Geburtstagsfeiern nie Zeit hatte. Jetzt geht es aber auf jeden Fall mit text-overflow weiter, das hauptsächlich deswegen so selten benutzt wird, da es erst offiziell mit CSS3 Einzug in die Webwelt hält.

Browserunterstützung

Browser Firefox Safari Opera Chrome Internet Explorer
ab Version 7 1.3 11.0 1.0 6.0

Die von Microsoft stammende Eigenschaft wird mittlerweile von allen Browsern außer Firefox unterstützt (es gibt aber schon einen Bug dafür ;) ), seit Version 7 auch von Firefox, unterstützt. Opera unterstützt sie seit Version 11, in Version 9-10 wurde aber noch die Präfix-Variante benutzt (-o-text-overflow).

Mit text-overflow können wir bestimmen, wie ein Text, der aufgrund seiner Länge nicht in sein Elternelement passt, abgeschnitten wird. Es werden für diese Eigenschaft nur drei Werte akzeptiert:

  1. ellipsis, Text endet mit drei Punkten “…” (U+2026, …)
  2. clip, der Text hört einfach auf, wie abgeschnitten (Defaultwert)
  3. <string>, eine Zeichenkette, mit der der Text abgeschnitten werden soll, wird noch von keinem Browser unterstützt!

Beispiel

Wie immer, zeige ich euch das Ganze natürlich an einem Beispiel, denkt daran, dass ihr den Effekt in Firefox nicht sehen könnt. Als Versuchskaninchen dient uns diesmal eine Liste, mit der Artikel angeteasert werden sollen.

HTML
1
2
3
4
5
6
7
8
<ul>
<li><h3>Post 1</h3>
<p>Lorem ipsum dolor sit amet.</p></li>
<li><h3>Post 2</h3>
<p>Lorem ipsum dolor sit amet, sadipscing elitr sed diam voluptua.</p></li>
<li><h3>Post 3</h3>
<p>Lorem ipsum dolor sit amet, sed diam nonumy eirmod.</p></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
ul {
	list-style:none;
	margin:10px 0;
	overflow:hidden;
}
li {
	background-color:#eee;
	border:1px solid #aaa;
	float:left;
	margin-right:20px;
	padding:5px;
	width:140px;
}
Ergebnis
  • Post 1

    Lorem ipsum dolor sit amet.

  • Post 2

    Lorem ipsum dolor sit amet, sadipscing elitr sed diam voluptua.

  • Post 3

    Lorem ipsum dolor sit amet, sed diam nonumy eirmod.

Damit erhalten wir drei gleiche Boxen. Das ist zwar ganz gut aber noch nicht schön. Schön wäre es, wenn die Boxen auch gleich hoch wären, dazu müssen wir den Text kürzen und das ist wiederum der Punkt, an dem uns text-overflow zu Hilfe kommt.

Als erstes müssen wir die Zeilenumbrüche mit white-space:nowrap verhindern – ohne dem geht es nicht! Danach müssen wir den Paragraphen innerhalb der Listenelemente ein overflow:hidden verpassen, damit zu langer Text nicht über das Element hinaus gerendert wird. Zum Schluss kommt noch text-overflow:ellipsis dazu. Das CSS der li-Tags wird also um folgenden Code erweitert:

zusätzliches CSS
1
2
3
4
5
6
7
li {
	white-space:nowrap;
}
li p {
	overflow:hidden;
	text-overflow:ellipsis;
}
Ergebnis
  • Post 1

    Lorem ipsum dolor sit amet.

  • Post 2

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam voluptua.

  • Post 3

    Lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Und siehe da (!=Firefox) die Boxen haben alle die gleiche Höhe und die Posts werden automatisch abgeschnitten und enden mit drei Punkten, ganz ohne PHP. Schöne Sache wie ich finde.. so und nun wünsche ich allen Lesern ein ruhiges Weihnachtsfest und eine schöne Bescherung. ;)

Die hier könnten dich auch interessieren…