DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft text-indent gibt an, wie viel horizontaler Platz Text vor der ersten Zeile des Textinhalts eines Elements verschoben werden soll. Der Abstand wird vom Anfang des Block-Level-Container-Elements berechnet.
Der Anfangsrand ist normalerweise links, kann aber auch rechts sein, wenn im Rechts-nach-links-Modus, wie bei der direction-Eigenschaft.
Die Eigenschaft text-indent wird vererbt, wenn sie auf einem Blockelement angegeben wird. Das bedeutet, dass sie auch inline-block-Nachfahrenelemente beeinflusst. Wenn Sie mit inline-block-Kindern arbeiten, möchten Sie sie möglicherweise dazu zwingen, text-indent: 0; zu haben.
Syntax
text-indent: <length> | <percentage> | inherit && [ hanging || each-line ]
p {
text-indent: 1.5em;
}Ein gängiger Anwendungsfall ist rein stilistisch. Das Einrücken der ersten Zeile von Absätzen ist etwas altmodisch und kann dieses Gefühl hervorrufen. Es könnte anstelle von Abständen nach Absätzen als alternativer visueller Indikator verwendet werden, obwohl Abstände im Allgemeinen wahrscheinlich besser lesbar sind.
Ein weiterer gängiger Anwendungsfall ist das „Image Replacement“, bei dem Text über text-indent aus einem Element hinausgeschoben und per overflow versteckt wird.
hanging
hanging ist ein experimenteller und inoffizieller Wert für die Eigenschaft text-indent. Er kehrt um, welche Zeilen eingerückt werden. Im Grunde rückt er jede Zeile außer der ersten ein, was zu einer Art hanging-punctuation führt.
Dieser Wert ist ein Flag, zusammen mit einem gängigen Wert wie einer Länge.
each-line
each-line ist ein experimenteller und inoffizieller Wert für die Eigenschaft text-indent. Die Idee ist, jede Zeile nach einem erzwungenen Zeilenumbruch (mit einem <br>) einzurücken.
Dieser Wert ist ein Flag, zusammen mit einem gängigen Wert wie einer Länge.
Demo
Siehe den Pen text-indent von Chris Coyier (@chriscoyier) auf CodePen.
Verwandte Eigenschaften
Weitere Ressourcen
Browser-Unterstützung
Grundlegende Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| any | any | any | 3.5+ | 3+ | any | any |
hanging Wert
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| none | none | none | none | none | none | none |
each-line Wert
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| none | none | none | none | none | none | none |
adidas パーカー
> [_Ihr zu verlinkender Text..._****](http://prout.com "prout")Alter/Kerl, ich glaube, Sie meinten „each-line ist ein experimenteller und inoffizieller Wert…“
nice
nice..ich verwende dies in einer mobilen Anwendung, in der Porträtansicht funktioniert es… in der Landschaftsansicht funktioniert es nicht
Die Gmail-App unterstützt dies nicht. Gibt es etwas anderes, das anstelle von text-indent verwendet werden kann? Danke
Hat jemand herausgefunden, wie man einen doppelten hängenden Einzug macht, auch bekannt als ein hängender Einzug auf einem hängenden Einzug. Nehmen wir zum Beispiel an, ich habe ein
<div>, das eine Aufzählungspunktzeile enthält, die die Länge des Div überschreitet. Ich verwende einen hängenden Einzug, um die nachfolgenden Zeilen am Anfang des tatsächlichen Textes in der ersten Zeile auszurichten, sodass der Punkt vorne hervorsteht. Bis jetzt so gut. Nun nehmen wir an, dass diese Aufzählungspunktzeile einige Kindzeilen hat (jede Zeile in ihrem eigenen<div>), die ordnungsgemäß über den Text der Aufzählungspunktzeile hinaus eingerückt werden sollten. Ich kann einfach die text-indent-Eigenschaft verwenden, was in Ordnung ist, es sei denn, diese Kindzeile überschreitet die Breite des Div. In diesem Fall werden die nachfolgenden Zeilen am tatsächlichen Punkt vor allen anderen Texten ausgerichtet. Vorschläge zur Handhabung dieser Situation sind willkommen.Es sollte hervorgehoben werden, dass die Eigenschaft text-indent VERERBT wird.
Verwenden Sie dieses Beispiel für die Bedeutung dieses Details
mit diesem CSS
Dann wird der Teil „dolor sit amet“ doppelt eingerückt, wegen der Elterndeklaration. Ich habe stundenlang nach einem Anzeigefehler in meiner App gesucht, und ich hoffe, ich kann jemandem andere Zeit sparen.