Właściwość CSSTypografia
text-indent
Ustawia wcięcie pierwszej linii tekstu w bloku.
- Wartość domyślna
0- Dziedziczona
- Tak
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- kontenery blokowe
- JavaScript
element.style.textIndent = "2em"
Przykład
#CSS
.book p + p {
text-indent: 1.5em;
margin-top: 0;
}HTML przykładu
<div class="book">
<p style="margin: 0">Pierwszy akapit rozdziału zwykle nie ma wcięcia.</p>
<p style="text-indent: 1.5em; margin: 0">Kolejne akapity zaczynają się od wcięcia i nie mają odstępu między sobą, jak w książkach.</p>
</div>Podgląd
Definicja i zastosowanie
#Właściwość text-indent przesuwa pierwszą linię tekstu w bloku o podaną wartość. Tak wygląda klasyczny akapit w książkach: pierwszy wiersz zaczyna się z wcięciem, kolejne od krawędzi.
Wartość ujemna tworzy tak zwane wysunięcie: pierwsza linia wychodzi w lewo przed pozostałe. Stosuje się to na przykład w bibliografiach.
Procenty liczą się od szerokości bloku. Wcięcie dotyczy tylko pierwszej linii bloku, także po wymuszonym złamaniu linii przez <br> nie jest powtarzane.
Składnia
#Składnia
text-indent: <długość> | <procent>;Wartości
#Wartości w praktyce
#0
Pierwsza linia zaczyna się od krawędzi.
.demo { text-indent: 0; }2em
Klasyczne wcięcie akapitu.
.demo { text-indent: 2em; }-1.5em
Wysunięcie pierwszej linii w lewo.
.demo { text-indent: -1.5em; padding-left: 1.5em; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W typografii książkowej stosuje się albo wcięcie, albo odstęp między akapitami, rzadko oba naraz.
- Nie ukrywaj tekstu dużym ujemnym wcięciem. Dawna sztuczka
text-indent: -9999pxszkodzi dostępności.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.