Die text-indentEigenschaft gibt an, wie viel horizontaler Raumtext vor dem Beginn der ersten Zeile des Textinhalts eines Elements verschoben werden soll. Der Abstand wird von der Startkante des Containerelements auf Blockebene berechnet.
Die Startkante befindet sich normalerweise links, kann aber im Modus von rechts nach links rechts sein, unter anderem in Richtungseigenschaft.
Die text-indentEigenschaft wird vererbt, wenn sie für ein Blockelement angegeben wird. Dies bedeutet, dass sie sich auch auf Inline-Block-Nachkommenelemente auswirkt. Wenn Sie mit Inline-Block-Kindern arbeiten, möchten Sie sie möglicherweise dazu zwingen text-indent: 0;.
Syntax
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Ein häufiger Anwendungsfall wäre einfach stilistisch. Das Einrücken der ersten Absatzzeile ist altmodisch und kann dieses Gefühl hervorrufen. Es könnte anstelle des Abstands nach Absätzen als alternativer visueller Indikator verwendet werden, obwohl der Abstand im Allgemeinen wahrscheinlich besser lesbar ist.
Ein weiterer häufiger Anwendungsfall ist das „Ersetzen von Bildern“, bei dem Text durch Texteinzug und versteckten Überlauf aus dem Element geworfen wird.
hängend
hangingist ein experimenteller und inoffizieller Wert für die text-indentImmobilie. Es kehrt um, welche Zeilen eingerückt sind. Grundsätzlich wird jede Zeile außer der ersten eingerückt, was zu einer Art hängenden Interpunktion führt.
Dieser Wert ist ein Flag, das mit einem gemeinsamen Wert wie einer Länge einhergeht.
jede Zeile
each-lineist ein experimenteller und inoffizieller Wert für die text-indentImmobilie. Die Idee ist, jede Zeile nach einem erzwungenen Zeilenumbruch einzurücken (mit a
Dieser Wert ist ein Flag, das mit einem gemeinsamen Wert wie einer Länge einhergeht.
Demo
Siehe den Stifttext-Einzug von Chris Coyier (@chriscoyier) auf CodePen.
Browser-Unterstützung
Grundlegende Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| irgendein | irgendein | irgendein | 3.5+ | 3+ | irgendein | irgendein |
hängender Wert
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| keiner | keiner | keiner | keiner | keiner | keiner | keiner |
jeder Zeilenwert
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| keiner | keiner | keiner | keiner | keiner | keiner | keiner |