text-indent

von 1 Mitwirkenden:

Ü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 block Container
  • Vererbt Ja
  • Prozentwerte bezieht sich auf die Breite des Inhalts
  • Medium visuell
  • Berechneter Wert the percentage as specified oder the absolute length, plus any keywords as specified
  • Animierbar Ja, als Längenangabe, Prozentsatz oder direction
  • Kanonische Reihenfolge the length oder percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.

Syntax

Formal syntax: <length> | <percentage> && [ hanging || each-line ]
text-indent: 3mm       /* Beispielw<length>erte */
text-indent: 40px
text-indent: 15%       /* Prozentuale Angaben sind<percentage> relativ zur Breite des Blockelements */
text-indent: each-line /* Festgelegte Werte */
text-indent: hanging

text-indent: inherit
</percentage></length>

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: nVentis
Zuletzt aktualisiert von: nVentis,