Webdesign, Tutorials und mehr - Webmasterpro.de

text-indent: Texteinzug

Die Eigenschaft text-indent rückt die erste Zeile eines Blockelements ein. Per Definition werden positive Werte nach rechts, negative nach links eingerückt.

Tipps und Tricks

Diese Eigenschaft wird oftmals dazu "missbraucht", um kurze Texte aus dem Blickfeld des Benutzers zu entfernen, ohne diese aus dem Dokument zu löschen. Ein typischer Fall für eine solche Anwendung ist beispielsweise eine Navigation, in der Hintergrundbilder eingesetzt werden sollen, die einen Text überflüssig machen. Für Suchmaschinen ist es jedoch wichtig, dass diese Links korrekt beschriftet sind. Folglich kann mit der Eigenschaft text-indent der einzeilige Text durch den Wert -1000px so weit nach links verschoben werden, dass dieser für den Benutzer nicht mehr sichtbar ist. Nachteil dieser Methode ist, dass meist ungewollte Konturen beim Klicken auf diese Links entstehen, die bis zum linken Bildschirmrand reichen. Diese zu entfernen, schränkt die Navigierbarkeit ein.

Ab CSS3 kann alternativ über rgba() eine transparente Schriftfarbe definiert werden.

Beispiel

1
2
3
4
5
6
7
8

<p style="text-indent:20px;"><strong>Dieser Text wird um 20px nach rechts eingerückt.</strong> Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich
begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht
keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen.</p>

<p style="text-indent:-30px;">
<strong>Dieser Text wird um 30px nach links eingerückt.</strong>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich
begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht
keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen.</p>

Weiterführende Links

• Sie können einen ganzen Absatz einrücken mittels padding-left oder margin-left

Kommentare: text-indent: Texteinzug