text-indent CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die text-indent-Eigenschaft von CSS legt die Länge des leeren Raums (Einzug) fest, der vor den Textzeilen in einem Block eingefügt wird.
Probieren Sie es aus
text-indent: 0;
text-indent: 30%;
text-indent: -3em;
text-indent: 3em each-line;
text-indent: 3em hanging;
text-indent: 3em hanging each-line;
<section id="default-example">
<div id="example-element">
<p>
This text is contained within a single paragraph. This paragraph is two
sentences long.
</p>
<p>
This is a new paragraph. There is a line break element
<code><br></code> after this sentence.<br />There it is! Notice how
it affects the indentation.
</p>
</div>
</section>
section {
font-size: 1.25em;
background-color: darkslateblue;
align-items: start;
}
#example-element {
text-align: left;
margin-left: 3em;
background-color: slateblue;
color: white;
}
Syntax
/* <length-percentage> values */
text-indent: 3mm;
text-indent: 40px;
text-indent: 15%;
/* with keyword values */
text-indent: 5em each-line;
text-indent: 5vb hanging;
text-indent: 5% hanging each-line;
/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;
Werte
<length>-
Der Einzug wird als absoluter
<length>angegeben. Negative Werte sind erlaubt. Siehe<length>Werte für mögliche Einheiten. <percentage>-
Der Einzug ist ein
<percentage>. Der Prozentsatz bezieht sich auf die eigene innere Inline-Größe des Containers. each-line-
Der Einzug betrifft die erste Zeile des Blockcontainers sowie jede Zeile nach einem erzwungenen Zeilenumbruch, beeinflusst jedoch nicht Zeilen nach einem weichen Zeilenumbruch.
hanging-
Kehrt um, welche Zeilen eingerückt werden. Alle Zeilen außer der ersten Zeile werden eingerückt.
Beschreibung
Die text-indent CSS-Eigenschaft legt die Länge des leeren Raums (Einzug) fest, der vor den Textzeilen in einem Blockcontainer eingefügt wird. Der durch die Eigenschaft gesetzte Einzug erfolgt am Inline-Start-Rand des Inhaltsbereichs. Der Wert ist ein <length-percentage>, optional mit einem oder beiden der Schlüsselwörter each-line und/oder hanging. Der Standardwert ist 0.
Prozentwerte beziehen sich auf die innere Größe der Inline-Achse des Blockcontainers, welche nur die Dimension des Inhaltsbereichs umfasst und das Padding und den Rand des Containers ausschließt.
Der <length-percentage>-Wert kann positiv oder negativ sein. Ein negativer Wert erzeugt einen negativen Einzug, der dem absoluten Wert des entsprechenden positiven <length-percentage>-Wertes entspricht. Ein negativer Wert verschiebt den Text effektiv um die Größe des Wertes, jedoch in die entgegengesetzte Richtung. Zum Beispiel rückt text-indent: 3%; die erste Textzeile ein, indem sie einen Leerraum hinzufügt, der 3 % der Innengröße des Containers entspricht, bevor der Text erscheint, und die erste Zeile des Inhalts in Richtung des Inline-Endrands verschiebt. Das Setzen von text-indent: -3% reduziert die erste Zeile des Textes und verschiebt den Beginn der ersten Textzeile 3 % der Innengröße des Containers über den Inline-Startrand des Inhaltsbereichs hinaus, in das Padding und den Rand hinein, wodurch der Container möglicherweise überläuft.
Ein negativer Wert unterscheidet sich davon, das hanging-Schlüsselwort zu einem positiven Wert hinzuzufügen. Im selben Beispiel rückt text-indent: 3% hanging die erste Zeile des Textes nicht aus. Stattdessen werden alle Textzeilen außer der ersten Zeile um 3 % der Innengröße des Containers eingerückt.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | Blockcontainer |
| Vererbt | Ja |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge plus Schlüsselwörter, falls angegeben |
| Animationstyp | Längenangabe, Prozentsatz oder calc(); |
Formale Syntax
text-indent =
[ <length-percentage> ] &&
hanging? &&
each-line?
<length-percentage> =
<length> |
<percentage>
Beispiele
Grundlegende Verwendung
Dieses Beispiel zeigt die grundlegende Verwendung der text-indent-Eigenschaft.
HTML
Wir fügen zwei Textabsätze ein.
<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
Wir verwenden die text-indent-Eigenschaft, um die erste Zeile jedes Absatzes um 5em einzurücken.
p {
text-indent: 5em;
background: powderblue;
}
Ergebnis
Prozentsatzeinzug
Unter Verwendung des gleichen HTML wie im vorherigen Beispiel zeigen wir hier die Verwendung von Prozentwerten und wie Prozentsätze im Verhältnis zum Inhaltsbereich des Elements in der Inline-Richtung stehen.
CSS
Wir setzen den text-indent auf einen Prozentwert. Zusätzlich haben wir Padding und vertikale Streifen hinzugefügt, um die Größe des Einzugs relativ zum Box-Modell des Elements besser zu beurteilen.
p {
text-indent: 30%;
padding: 30px;
background-image: repeating-linear-gradient(
to right,
transparent 0 9.5%,
#dedede 9.5% 10%
);
background-color: plum;
}
Ergebnis
Einzug beim ersten Absatz überspringen
Eine allgemeine typografische Praxis bei vorhandenem Absatzeinzug besteht darin, den Einzug für den ersten Absatz zu überspringen. Wie The Chicago Manual of Style sagt: "Die erste Textzeile nach einer Unterüberschrift kann bündig links beginnen oder mit dem üblichen Absatzeinzug eingerückt werden."
Erstes Absätze anders als nachfolgende Absätze zu behandeln, kann mit dem Nachfolge-Geschwisterkombinator erfolgen, wie im folgenden Beispiel:
HTML
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
amet porttitor dui interdum.
</p>
<p>
Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>
<h2>Donec ullamcorper elit nisl</h2>
<p>
Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
eleifend id. Ut at quam velit.
</p>
<p>
Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
libero, sed euismod ipsum ullamcorper sed.
</p>
CSS
p {
text-align: justify;
margin: 1em 0 0 0;
}
p + p {
text-indent: 2em;
margin: 0;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Module Level 3 # text-indent-property |
Browser-Kompatibilität
Siehe auch
- Verwandte CSS-Eigenschaften:
- CSS Textdekoration Modul
- CSS Text Modul
- Erlernen Sie HTML mit CSS zu gestalten