Schönen guten Abend!

Ein weiterer Tag, ein weiteres Türchen, eigentlich wollte ich mittlerweile mal etwas aufgeholt haben aber irgendwie kommt immer was dazwischen. Aber na gut, kommen wir also zu #14: text-indent. Mit dieser Eigenschaft können wir die erste Zeile eines beliebigen Textblocks manipulieren.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	3.0

Unterstützt ab Internet Explorer 3.0, das sagt glaub ich alles. Man kann die Eigenschaft also bedenkenlos einsetzen, sie funktioniert ausnahmslos in jedem Browser.

Erfahrene Webdeveloper nutzen diese Technik relativ häufig um beispielsweise Text zu verstecken oder um einen Absatz eingerückt beginnen zu lassen. Für Anfänger jedoch erschließt sich der richtige Gebrauch von text-indent meist etwas zu spät. Deswegen sei hier nochmal darauf hingewiesen, dass man damit nur einzeilige Texte bzw. die erste Zeile eines Textes beeinflussen kann.

Als Werte sind positive wie negative Längenangaben und prozentuale Angaben erlaubt.

Beispiele

Beispiel Nummer eins gebraucht text-indent zur Einrückung von Absatzanfängen, als Basis dient uns folgender Code:

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum.</p>

CSS

1
2
3

p {
	text-indent:2em;
}

Ergebnis

Man beachte, wie die erste Zeile des Absatzes um 2em eingerückt wird, die anderen Zeilen aber nicht.

Deswegen sollte man text-indent auch niemals in Menüs/Navigationen verwenden, sollte nämlich doch mal ein Menüpunkt umbrechen, ist nur die obere Zeile eingerückt, nicht aber der Rest des Textes. In solchen Fällen ist padding zu bevorzugen.

Nächstes Beispiel: Wie in Türchen #3 angedeutet, wird text-indent gern zum verstecken von Text verwendet, speziell wenn es um Image-Replacement geht. Wollen wir doch noch mal nachsehen, wie genau das funktioniert. Wir nehmen wieder den Absatz von oben und fügen noch ein span-Tag ein, dass wir mit einem Bild (in diesem Fall der Schriftzug meines Blogs) ersetzen wollen..

HTML

1
2
3
4

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua. <span class="logo">Norman's Blog</span> 
At vero eos et accusam et justo duo dolores et ea rebum.</p>

CSS

1
2
3
4
5
6
7
8

.logo {
	background:transparent url(normansblog_logo.png) no-repeat 0 0;
	display:inline-block; /*damit height und width greift*/
	height:29px; /*Höhe des Bildes*/
	text-indent:-9999px;
	vertical-align:bottom;
	width:150px; /*Breite des Bildes*/
}

Ergebnis

Soviel dazu, text-indent ist also eine nützliche Sache, die man im Hinterkopf behalten sollte.