text-indent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die text-indent CSS Eigenschaft legt die Länge des Leerraums (Einrückung) fest, der vor Zeilen von Text in einem Block eingefügt wird.

Probieren Sie es aus

Der horizontale Abstand bezieht sich auf den linken (oder rechten, bei Rechts-nach-Links-Layout) Rand der Inhaltsbox des umgebenden Block-Elementes.

Syntax

css
/* <length> values */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> value
   relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

Werte

<length>

Die Einrückung wird als absolute <length> angegeben. Negative Werte sind erlaubt. Siehe <length> Werte für mögliche Einheiten.

<percentage>

Die Einrückung ist ein <percentage> der Breite des umgebenden Blocks.

each-line

Die Einrückung betrifft die erste Zeile des Blockcontainers sowie jede Zeile nach einem erzwungenen Zeilenumbruch, beeinflusst jedoch keine Zeilen nach einem weichen Umbruch.

hanging

Kehrt um, welche Zeilen eingerückt werden. Alle Zeilen außer der ersten Zeile werden eingerückt.

Formale Definition

Initialer Wert0
Anwendbar aufBlockcontainer
VererbtJa
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge plus Schlüsselwörter, falls angegeben
AnimationstypLängenangabe, Prozentsatz oder calc();

Formale Syntax

text-indent = 
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?               

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Einfache Einrückung

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

css
p {
  text-indent: 5em;
  background: powderblue;
}

Ergebnis

Einrückung beim ersten Absatz überspringen

Eine häufige typografische Praxis, wenn Absatz-Einrückungen vorhanden sind, besteht darin, die Einrückung für den ersten Absatz zu überspringen. Wie es The Chicago Manual of Style ausdrückt: „Die erste Zeile des Textes nach einer Zwischenüberschrift kann bündig links beginnen oder mit der üblichen Absatzeinrückung eingerückt werden.“

Die unterschiedliche Behandlung der ersten Absätze gegenüber nachfolgenden Absätzen kann durch die Verwendung des Nachbar-Kombinators erreicht werden, wie im folgenden Beispiel:

HTML

html
<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

CSS

css
p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

Ergebnis

Prozentuale Einrückung

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

css
p {
  text-indent: 30%;
  background: plum;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 3
# text-indent-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch