text-indent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die text-indent CSS-Eigenschaft legt die Länge des Leerraums (Einzug) fest, der vor Zeilen des Textes 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;
}
Der horizontale Abstand bezieht sich auf den linken (oder rechten, für Layouts von rechts nach links) Rand des Inhaltsbereichs des übergeordneten Block-Elements.
Syntax
/* <length> values */
text-indent: 3mm;
text-indent: 40px;
/* <percentage> value
relative to the containing block width */
text-indent: 15%;
/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em 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 Breite des umschließenden Blocks. each-line-
Der Einzug betrifft die erste Zeile des Block-Containers sowie jede Zeile nach einem erzwungenen Zeilenumbruch, wirkt sich jedoch nicht auf Zeilen nach einem weichen Umbruch aus.
hanging-
Kehrt um, welche Zeilen eingerückt werden. Alle Zeilen außer der ersten Zeile werden 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
Einfacher Einzug
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;
}
Ergebnis
Auslassen des Einzugs beim ersten Absatz
Eine gängige typografische Praxis, wenn Absatzeinzüge vorhanden sind, besteht darin, den Einzug für den ersten Absatz auszulassen. Wie The Chicago Manual of Style beschreibt, "kann die erste Zeile des Textes nach einer Unterüberschrift flach links beginnen oder mit dem üblichen Absatzeinzug eingerückt werden."
Die unterschiedliche Behandlung erster Absätze im Vergleich zu nachfolgenden Absätzen kann mithilfe des nächstes Geschwisterkombinators erreicht werden, 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
Prozentualer Einzug
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: 30%;
background: plum;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Text Module Level 3 # text-indent-property |
Browser-Kompatibilität
Siehe auch
-
Verwandte CSS-Eigenschaften:
-
CSS Textdekoration CSS-Modul