9.1 Właściwość text-indent
Właściwości akapitów w CSS odgrywają kluczową rolę w zarządzaniu formatowaniem tekstu, zapewniając wygodę czytania i estetyczny wygląd. Wśród nich text-indent i text-align-last są ważnymi narzędziami do ustawienia wcięć i wyrównania ostatniej linii tekstu w akapicie.
Właściwość text-indent zarządza wcięciem pierwszej linii tekstu wewnątrz elementu bloku. Często używa się jej do tworzenia wcięć na początku akapitów, co poprawia czytelność i strukturę tekstu.
Wartości:
- Wartości absolutne: wartości w stałych jednostkach, takich jak piksele (
px), punkty (pt), centymetry (cm) itp. Na przykład,text-indent: 20px; - Wartości procentowe: wartości w procentach od szerokości bloku zawierającego. Na przykład,
text-indent: 5%; - Wartości ujemne: wcięcia mogą być ujemne, co spowoduje wyrównanie tekstu w lewo poza granice kontenera. Na przykład,
text-indent: -20px;
Przykład użycia:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">To akapit z wcięciem pierwszej linii o 20 pikseli.</p>
<p class="indent-5percent">To akapit z wcięciem pierwszej linii o 5 procent od szerokości bloku.</p>
<p class="indent-negative">To akapit z ujemnym wcięciem pierwszej linii o 20 pikseli.</p>
</body>
9.2 Właściwość text-align-last
Właściwość text-align-last zarządza wyrównaniem ostatniej linii tekstu wewnątrz elementu bloku. Jest przydatna do osiągnięcia spójnego wyrównania w akapitach, zwłaszcza gdy tekst jest wyrównany do szerokości (justify).
Wartości:
auto: ostatnia linia jest wyrównywana jak zwykły tekst (wartość domyślna)left: ostatnia linia jest wyrównywana do lewego brzeguright: ostatnia linia jest wyrównywana do prawego brzegucenter: ostatnia linia jest wyśrodkowanajustify: ostatnia linia jest wyrównywana do szerokości, podobnie jak pozostałe linie akapitu
Przykład użycia:
.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">To akapit z wyrównaniem tekstu do szerokości i ostatniej linii do lewego brzegu.</p>
<p class="justify-right">To akapit z wyrównaniem tekstu do szerokości i ostatniej linii do prawego brzegu.</p>
<p class="justify-center">To akapit z wyrównaniem tekstu do szerokości i ostatniej linii do środka.</p>
<p class="justify-justify">To akapit z wyrównaniem tekstu i ostatniej linii do szerokości.</p>
</body>
9.3 Wspólne użycie właściwości
Właściwości text-indent i text-align-last mogą być używane razem do tworzenia bardziej złożonego formatowania akapitów, poprawiając czytelność i wizualną strukturę tekstu.
Przykład HTML i 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">
Ten akapit ma wcięcie pierwszej linii o 30 pikseli, tekst jest wyrównany do szerokości, a ostatnia linia jest wyrównana do prawego brzegu.
To demonstruje wspólne użycie właściwości text-indent i text-align-last w celu osiągnięcia pożądanego efektu formatowania.
</p>
</body>
Wyjaśnienie kodu:
text-indent: 30px;: ustawia wcięcie pierwszej linii tekstu na 30 pikselitext-align: justify;: wyrównuje tekst do szerokości konteneratext-align-last: right;: wyrównuje ostatnią linię tekstu do prawego brzeguwidth: 300px;: ustawia szerokość kontenera dla tekstuborder: 1px solid #000;: dodaje ramkę wokół kontenera tekstupadding: 10px;: ustawia wewnętrzne odstępy wewnątrz kontenera
GO TO FULL VERSION