Ü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
Medienvisuell
Berechneter Wertder Prozentwert wie angegeben oder die absolute Länge plus Schlüsselwörter, falls angegeben
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische ReihenfolgeDie Länge oder der Prozentwert vor den Schlüsselwörtern, falls beide angegeben wurden. Falls mehrere Schlüsselwörter angegeben wurden, erscheinen sie in derselben Reihenfolge, wie in der formellen Grammatik angegeben.

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
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
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.
Arbeitsentwurf 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 3Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
each-line
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
hanging
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, fscholz, Simplexible, Prinz_Rana, Sebastianz, nVentis
Zuletzt aktualisiert von: SJW,