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.

* Some parts of this feature may have varying levels of support.

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

Probieren Sie es aus

text-indent: 0;

text-indent: 30%;

text-indent: -3em;

text-indent: 3em each-line;

text-indent: 3em hanging;

text-indent: 3em hanging each-line;

<section id="default-example">
  <div id="example-element">
    <p>
      This text is contained within a single paragraph. This paragraph is two
      sentences long.
    </p>
    <p>
      This is a new paragraph. There is a line break element
      <code>&lt;br&gt;</code> after this sentence.<br />There it is! Notice how
      it affects the indentation.
    </p>
  </div>
</section>

section {
  font-size: 1.25em;
  background-color: #483d8b;
  align-items: start;
}

#example-element {
  text-align: left;
  margin: 0 0 0 3em;
  background-color: #6a5acd;
  color: white;
}

Der horizontale Abstand bezieht sich auf den linken (oder rechten, bei von rechts nach links ausgerichtetem Layout) Rand des Inhaltskastens des umschließenden 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 absoluter <length> angegeben. Negative Werte sind erlaubt. Siehe <length> Werte für mögliche Einheiten.

<percentage>

Die Einrückung beträgt einen <percentage> der Breite des umschließenden Blocks.

each-line

Die Einrückung betrifft die erste Zeile des Blockcontainers sowie jede Zeile nach einem erzwungenen Zeilenumbruch, wirkt sich jedoch nicht auf Zeilen nach einem weichen Zeilenumbruch aus.

hanging

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

Formale Definition

Anfangswert0
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

Grundlegende 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

Überspringen der Einrückung beim ersten Absatz

Eine häufige typografische Praxis, wenn Absatzeinrückungen vorhanden sind, ist das Überspringen der Einrückung für den ersten Absatz. Wie es The Chicago Manual of Style formuliert, "kann die erste Textzeile nach einer Überschrift linksbündig beginnen oder die übliche Absatzeinrückung haben."

Erste Absätze anders zu behandeln als nachfolgende Absätze kann mit dem Geschwisterkombinator 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

Siehe auch