CSS text-indent Eigenschaft

Die CSS-Eigenschaft text-indent legt die Menge des Leerraums vor der ersten Zeile eines Textblocks fest — der klassische „Absatzeinzug", den man aus gedruckten Büchern kennt. Sie wirkt sich nur auf die erste Zeile jedes Blockelements aus; alle weiteren Zeilen bleiben am Randbereich des Elements ausgerichtet.

Standardmäßig wird der Einzug am Anfang der Zeile eingefügt, entsprechend der Schreibrichtung, die durch die Eigenschaft direction festgelegt wird — am linken Rand bei links-nach-rechts-Text und am rechten Rand bei rechts-nach-links-Text. Ein negativer Wert zieht die erste Zeile in die entgegengesetzte Richtung (bei LTR-Text nach links), was einen hängenden Einzug erzeugt.

Wann und warum verwenden

Typografische Absatzeinzüge. Das Einrücken der ersten Zeile ist die traditionelle Methode, Absätze voneinander zu trennen, ohne Leerzeilen dazwischen — üblich in langen Artikeln und buchähnlichen Layouts.
Hängende Einzüge. Ein negativer text-indent-Wert kombiniert mit einem passenden padding-left lässt die erste Zeile vorstehen und umbrecht die restlichen Zeilen eingerückt — nützlich für Bibliografien und Definitionslisten.
Zugängliches Ausblenden von Text. Der alte Trick text-indent: -9999px verschob Text aus dem Sichtbereich, während er für Screenreader und Suchmaschinen lesbar blieb (wird heute größtenteils durch visually-hidden-Hilfsklassen ersetzt).

text-indent wird vererbt, sodass ein auf einem Elternelement gesetzter Wert an untergeordnete Blockcontainer weitergegeben wird, sofern er nicht überschrieben wird.

Warnung

Die Werte "each-line" und "hanging" sind experimentell.

Anfangswert	0
Gilt für	Blockcontainer.
Vererbbar	Ja.
Animierbar	Ja. text-indent ist animierbar.
Version	CSS1
DOM-Syntax	object.style.textIndent = "100px";

Syntax

Syntax der CSS text-indent Eigenschaft

text-indent: length | percentage | each-line | hanging | initial | inherit;

Beispiel der text-indent Eigenschaft:

Beispiel der CSS text-indent Eigenschaft mit px-Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <p>
      This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.
    </p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der text-indent Eigenschaft mit "pt", "em", "%" und "cm":

Beispiel der CSS text-indent Eigenschaft mit pt, cm, % und em Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        text-indent: 20pt;
      }
      div.b {
        text-indent: -5em;
      }
      div.c {
        text-indent: 70%;
      }
      div.d {
        text-indent: 4em;
      }
      div.e {
        text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Probier es selbst »

Hängenden Einzug erstellen

Ein negativer text-indent-Wert kombiniert mit einem passenden padding-left rückt alle Zeilen außer der ersten ein — das Standardmuster für Literaturverzeichnisse und Quellenangaben:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.reference {
        text-indent: -2em;
        padding-left: 2em;
      }
    </style>
  </head>
  <body>
    <p class="reference">
      Knuth, Donald E. The Art of Computer Programming. Reading,
      Massachusetts: Addison-Wesley, 1968. This long entry wraps onto
      several lines so you can see the hanging indent in action.
    </p>
  </body>
</html>

Prozentwerte

Wenn Sie einen Prozentwert angeben, wird der Einzug aus der Breite des umgebenden Blocks berechnet, nicht aus der Schriftgröße. So ergibt text-indent: 10% bei einem 600px breiten Container einen Einzug von 60px. Da der Wert relativ ist, wächst und schrumpft der Einzug mit der Layoutgröße, was ihn auf responsiven Seiten proportional hält.

Werte

Wert	Beschreibung	Ausprobieren
length	Gibt den Einzug in px, pt, cm, em usw. an. Der Standardwert ist 0. Negative Werte sind erlaubt.	Ausprobieren »
percentage	Gibt den Einzug als Prozentsatz der Breite des umgebenden Blocks an.	Ausprobieren »
each-line	Der Einzug gilt für die erste Zeile sowie für jede Zeile nach einem erzwungenen Zeilenumbruch, nicht jedoch für Zeilen nach einem weichen Umbruch. Dieser Wert ist eine experimentelle Technologie.
hanging	Kehrt um, welche Zeilen eingerückt werden. Die erste Zeile wird nicht eingerückt. Dieser Wert ist eine experimentelle Technologie.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom Elternelement.

Übung

Was bewirkt die text-indent-Eigenschaft in CSS?

Sie rückt die erste Zeile des Textes in einem Block ein.Sie ändert die Farbe des Textes.Sie rückt alle Zeilen des Textes in einem Block ein.Sie passt die Textgröße an.Sie beeinflusst den Zeilenabstand des Textes in einem Block.