Własność CSS text-indent

Własność CSS text-indent określa szerokość i rodzaj wcięcia tekstu w elementach blokowych.

Wartości i składnia

Własność CSS text-indent przyjmuje następujące wartości:

Liczba z jednostką długości: Określa konkretną szerokość wcięcia, wartość ta może być ujemna.
Wartość procentowa: Określa szerokość wcięcia jako procent szerokości bloku zawierającego .
each-line: Powoduje wcięcie pierwszego wiersza bloku oraz każdego wiersza znajdującego się po wymuszonym złamaniu wiersza.
hanging: Odwraca sposób wcięcia, tzn. wcięte są wszystkie wiersza tekstu oprócz pierwszego.

Słowa kluczowe each-line i hanging mogą być używane razem z liczbą z jednostką długości lub wartością procentową w dowolnej konfiguracji, tzn. może zostać użyte jedno z nich, oba lub żadne.

Przykłady

Wcięcie zależne od rozmiaru pisma

W poniższym przykładzie pierwszy wiersz tekstu będzie wcięty na odległość równą trzykrotności rozmiaru pisma zawierającego go elementu:


<style>
p {
  text-indent: 3em;
}
</style>
...
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Efekt:

Wcięcie „wiszące”

W tym przykładzie wcięte będą wszystkie wiersze tekstu oprócz pierwszego:


<style>
p {
  text-indent: 3em hanging;
}
</style>
...
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>