text-indent

√úbersicht

Die CSS Eigenschaft text-indent legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.

Initialwert0
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();

Syntax

Formal syntax: 
<length-percentage> && hanging? && each-line?

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

text-indent: 3mm       /* Beispielwerte */
text-indent: 40px
text-indent: 15%       /* Prozentuale Angaben sind relativ zur Breite des Blockelements */
text-indent: each-line /* Festgelegte Werte */
text-indent: hanging

text-indent: inherit

Werte

<length>
Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. F√ľr m√∂gliche Einheiten, siehe <length> .
<percentage>
Abstand wird prozentual <percentage> zur Breite des enthaltenden Blockelements angegeben.
each-line This is an experimental API that should not be used in production code.
Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (forced line break ), l√§sst Zeilen nach einem soft wrap break allerdings unber√ľhrt.
hanging This is an experimental API that should not be used in production code.
Kehrt den Texteinzug um. Jede Zeile, au√üer der ersten, wird einger√ľckt.

Beispiel mit absoluter Angabe

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

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

Beispiel mit prozentualer Angabe

HTML Content

<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 Content

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

Details

Specification Status Kommentar
CSS Text Module Level 3
Die Definition von 'text-indent' in dieser Spezifikation.
Anw√§rter Empfehlung Schl√ľsselwerte hanging und each-line hinzugef√ľgt
CSS Transitions
Die Definition von 'text-indent' in dieser Spezifikation.
Arbeitsentwurf text-indent als Eigenschaft, die animiert werden kann
CSS Level 2 (Revision 1)
Die Definition von 'text-indent' in dieser Spezifikation.
Empfehlung Verhalten von display: inline-block und anderen block Containern explizit definiert
CSS Level 1
Die Definition von 'text-indent' in dieser Spezifikation.
Empfehlung  

Browserkompatibilität

BCD tables only load in the browser