Jak zrobić wcięcie w tekście HTML? Właściwość text-ident

redakcja | 20.07.2021 09:36
Kobieta czytająca gazetę - ilustracja do artykułu o wcięciach tekstu
Kobieta czytająca gazetę - ilustracja do artykułu o wcięciach tekstu | envato, autor Rawpixel

Wcięcie tekstu w HTML, czyli bardziej znane jako wcięcia akapitowe, wykonujemy za pomocą stylów CSS.

Właściwość, za pomocą której możemy wykonać wcięcie tekstu to text-ident.

Text-ident przyjmuje stałe wartości liczbowe oraz procentowe, a jeśli element nie dziedziczy to początkowa wartość text-ident to 0. 

Jak wciąć paragraf o 10px?

Użyj do tego stylów CSS i właściwości text-ident. Poniższy kod wetnie wszystkie akapity w Twoim HTML o 10px.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget pellentesque sapien, in molestie.</p>

<style>

p { text-indent: 10px; }

</style>

Poniższy kod wetnie o 10px tylko akapity z klasą ident <p class="ident">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget pellentesque sapien, in molestie dui.</p>

.ident { text-indent: 10px; }

Kiedy stosować wcięcia akapitowe?

Wcięcia akapitowe nie powinny być dodane do każdego paragrafu <p>, to jest niestety obowiązujący mit. Wcięcia akapitowe stosuje się przy rozpoczęciach nowej myśli. Do podziału tekstu możesz stosować również nagłówki Hx, nową linię <br>, poziomą linię <hr> lub zwykłe paragrafy <p>. 

Musisz również pamiętać, że:

  • wcięcia akapitowe, tak dobrze znane z gazet, niestety coraz rzadziej używa się w tekstach online,
  • nie powinieneś wcinać tekstu zaraz po Hx, bo sam nagłówek jest rozpoczęciem nowej myśli; tak samo nie powinieneś wcinać gdy wyróżniłeś akapit inicjałem;generalnie nie powinno się używać dwóch sposobów wyróżniania akapitu, 
  • wcięcia tekstu przy wielu akapitach pod sobą znakomicie poprawiają czytelność.
Artykuły z portalu