Ü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.
| Initialwert | 0 |
|---|---|
| Anwendbar auf | Blockcontainer |
| Vererbt | Ja |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Medien | visuell |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge plus Schlüsselwörter, falls angegeben |
| Animierbar | ja, als Längenangabe, Prozentsatz oder calc(); wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert. |
| Kanonische Reihenfolge | Die 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 ]
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 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
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Grundfunktionalität | 1.0 (1.7 oder früher) | 1.0 | 3.0 | 3.5 | 1.0 (85) |
hanging |
Nicht unterstützt (Bug 784648) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
each-line |
Nicht unterstützt (Bug 784648) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.2) | ? | ? | ? | ? |
hanging |
Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
each-line |
Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |