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 (Einzugs) fest, der vor Zeilen von Text 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: darkslateblue;
  align-items: start;
}

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

Der horizontale Abstand bezieht sich auf den linken (oder rechten, für rechts-nach-links-Anordnung) Rand des Inhaltskasten des blockelementischen enthaltenden Elements.

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>

Der Einzug wird als absolute <length> angegeben. Negative Werte sind zulässig. Siehe <length>-Werte für mögliche Einheiten.

<percentage>

Der Einzug ist ein <percentage> der Breite des enthaltenden Blocks.

each-line

Der Einzug betrifft die erste Zeile des Blockcontainers sowie jede Zeile nach einem erzwungenen Zeilenumbruch, nicht jedoch Zeilen nach einem weichen Umbruch.

hanging

Kehrt um, welche Zeilen eingezogen werden. Alle Zeilen außer der ersten Zeile werden eingezogen.

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

Einfacher Einzug

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

Einzug beim ersten Absatz überspringen

Eine übliche typografische Praxis, wenn Absatzeinzüge vorhanden sind, ist, den Einzug für den ersten Absatz zu überspringen. Wie The Chicago Manual of Style es ausdrückt, "die erste Zeile des Textes nach einer Unterüberschrift kann flächenbündig links beginnen oder durch den üblichen Absatzeinzug eingerückt sein."

Erste Absätze anders als folgende Absätze zu behandeln, kann mit dem Nachfolgender-Geschwister-Kombinator 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

Prozentualer Einzug

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