Jak wciąć tekst w HTML – metody i przykłady

Wprowadzenie

Choć HTML służy przede wszystkim do strukturyzacji treści, istnieją elementy pozwalające wciąć tekst. W3C zaleca formatowanie przy pomocy CSS, ale w prostych przypadkach można użyć samych znaczników HTML.

Niełamiące spacje (non‑breaking spaces)

Znak   (non‑breaking space) działa jak zwykła spacja, ale nie jest łamany przy zmianie wiersza. Aby wcisnąć kilka spacji przed tekstem, wstaw odpowiednią liczbę encji. Przykład wcięcia pięciu spacji:

     Tekst wcięty pięcioma spacjami

Tag blockquote

Tag <blockquote> automatycznie wcięcie całego bloku tekstu. Domyślnie dodaje także obramowanie i odstępy, które można zresetować przy pomocy stylu inline:

<blockquote style=\"border:none;margin:0;padding-left:10px;\">Twój wcięty tekst</blockquote>

Tag <pre>

Element <pre> zachowuje dokładny układ znaków – spacje i tabulacje wprowadzane w edytorze są wyświetlane tak, jak zostały zapisane. Dzięki temu można ręcznie wciąć dowolną liczbę znaków przed każdą linią.

Wcięcia przy użyciu CSS

Najbardziej elastycznym rozwiązaniem jest CSS. Właściwość text-indent wcięcie pierwszej linii akapitu, natomiast margin-left przesuwa cały blok tekstu.

/* Wcięcie pierwszej linii o 10 px */
p {text-indent:10px;}
/* Przesunięcie całego akapitu o 10 px */
p {margin-left:10px;}

Reguły można umieścić w arkuszu stylów wewnętrznym lub zewnętrznym, aby zastosować je do wszystkich elementów <p> lub <div> na stronie.