9.1 Eigenschaft text-indent
Die Absatzeigenschaften in CSS spielen eine Schlüsselrolle bei der Textformatierung, um Lesbarkeit und ästhetisches Erscheinungsbild zu gewährleisten. Unter ihnen sind text-indent und text-align-last wichtige Werkzeuge zur Anpassung von Einrückungen und der Ausrichtung der letzten Zeile im Absatz.
Die Eigenschaft text-indent steuert die Einrückung der ersten Zeile eines Textes innerhalb eines Blockelements. Sie wird häufig verwendet, um Einrückungen am Anfang von Absätzen zu erstellen, was die Lesbarkeit und Struktur des Textes verbessert.
Werte:
- Absolute Werte: Werte in festen Einheiten wie Pixel (
px), Punkte (pt), Zentimeter (cm) usw. Zum Beispiel,text-indent: 20px; - Relative Werte: Werte in Prozent der Breite des umgebenden Blocks. Zum Beispiel,
text-indent: 5%; - Negative Werte: Einrückungen können negativ sein, was dazu führt, dass der Text über die Grenzen des Containers hinaus nach links ausgerichtet wird. Zum Beispiel,
text-indent: -20px;
Beispielverwendung:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Das ist ein Absatz mit einer Einrückung der ersten Zeile von 20 Pixeln.</p>
<p class="indent-5percent">Das ist ein Absatz mit einer Einrückung der ersten Zeile von 5 Prozent der Blockbreite.</p>
<p class="indent-negative">Das ist ein Absatz mit einer negativen Einrückung der ersten Zeile von 20 Pixeln.</p>
</body>
9.2 Eigenschaft text-align-last
Die Eigenschaft text-align-last steuert die Ausrichtung der letzten Zeile eines Textes innerhalb eines Blockelements. Sie ist nützlich, um eine konsistente Ausrichtung in Absätzen zu erreichen, besonders wenn der Text im Blocksatz (justify) ausgerichtet ist.
Werte:
auto: Die letzte Zeile wird wie normaler Text ausgerichtet (Standardwert)left: Die letzte Zeile wird linksbündig ausgerichtetright: Die letzte Zeile wird rechtsbündig ausgerichtetcenter: Die letzte Zeile wird zentriertjustify: Die letzte Zeile wird im Blocksatz ausgerichtet, wie die übrigen Zeilen des Absatzes
Beispielverwendung:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Das ist ein Absatz mit Blocksatzausrichtung des Textes und der letzten Zeile linksbündig.</p>
<p class="justify-right">Das ist ein Absatz mit Blocksatzausrichtung des Textes und der letzten Zeile rechtsbündig.</p>
<p class="justify-center">Das ist ein Absatz mit Blocksatzausrichtung des Textes und der letzten Zeile zentriert.</p>
<p class="justify-justify">Das ist ein Absatz mit Blocksatzausrichtung des Textes und der letzten Zeile im Blocksatz.</p>
</body>
9.3 Gemeinsame Verwendung von Eigenschaften
Die Eigenschaften text-indent und text-align-last können zusammen verwendet werden, um eine komplexere Absatzformatierung zu erstellen, die Lesbarkeit und visuelle Struktur des Textes verbessert.
Beispiel HTML und CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Dieser Absatz hat eine Einrückung der ersten Zeile von 30 Pixeln, der Text ist im Blocksatz ausgerichtet und die letzte Zeile ist rechtsbündig. Dies zeigt die gemeinsame Verwendung der Eigenschaften text-indent und text-align-last, um den gewünschten Formatierungseffekt zu erzielen.
</p>
</body>
Erklärung des Codes:
text-indent: 30px;: setzt die Einrückung der ersten Textzeile auf 30 Pixeltext-align: justify;: richtet den Text im Blocksatz innerhalb des Containers austext-align-last: right;: richtet die letzte Textzeile rechtsbündig auswidth: 300px;: setzt die Breite des Textcontainersborder: 1px solid #000;: fügt eine Umrandung um den Textcontainer hinzupadding: 10px;: setzt Innenabstände im Container
GO TO FULL VERSION