Aby ustawić odstęp między wyrazami w HTML, najczęściej korzysta się z własności CSS word-spacing. Pozwala ona precyzyjnie kontrolować przestrzeń pomiędzy słowami w tekście, poprawiając czytelność lub nadając tekstowi pożądany efekt wizualny.
Podstawy działania word-spacing
Własność word-spacing służy do ustawiania dodatkowego odstępu między wyrazami (czyli spacjami, które pojawiają się między słowami w tekście). Można ją stosować do dowolnego elementu tekstowego, np. paragrafów, nagłówków, a nawet pojedynczych fragmentów tekstu w znaczniki <span>.
p { word-spacing: 10px; }
Wszystkie akapity (<p>) będą mieć wtedy odstępy między wyrazami o wielkości 10 pikseli.
Przykłady zastosowania
Zwiększanie odstępu dla czytelności
<p style="word-spacing: 0.5em;">Ten tekst ma powiększone odstępy między wyrazami.</p>
Stosowanie jednostki em pozwala na skalowanie odstępu względem wielkości czcionki, co bywa szczególnie przydatne w responsywnych projektach.
Zmniejszanie odstępu
Czasami zależy nam, by wyrazy były bliżej siebie:
p { word-spacing: -2px; }
To rozwiązanie sprawi, że wyrazy będą do siebie bardziej przylegały.
Różne jednostki
W CSS można użyć różnych jednostek: piksele (px), punkty (pt), centymetry (cm), em, rem itd.
- 1 centymetr,
- 2 punkty.
<p style="word-spacing: 1cm;">1-centymetrowe odstępy między wyrazami.</p>
<p style="word-spacing: 2pt;">Odstępy między wyrazami: 2 punkty.</p>
Własność dziedziczenia
word-spacing jest dziedziczona przez elementy potomne. Gdy ustawisz ją dla nadrzędnego bloku, wszystkie podrzędne fragmenty tekstu również zyskają ten odstęp, o ile nie został nadpisany.
Użycie w praktyce
Nagłówki i śródtytuły dla efektu graficznego
<h1 style="word-spacing: 20px;">Wyróżniony nagłówek</h1>
Fragment tekstu w <span>
Można też modyfikować tylko wybrany fragment:
<p>Ten <span style="word-spacing: 1em;">fragment tekstu</span> ma inaczej ustawione odstępy między wyrazami.</p>
Wartość domyślna i resetowanie
- Wartość domyślna –
word-spacing: normal;Ustawia domyślny odstęp, zdefiniowany przez przeglądarkę i czcionkę; - Reset – aby wrócić do wartości domyślnej.
p { word-spacing: normal; }
Zaawansowane aspekty
- Wartość ujemna (
-2px) – może spowodować nakładanie się wyrazów, więc należy jej używać ostrożnie; - Stylując elementy display:inline, np.
<span>, można uzyskać lokalny efekt wizualny bez modyfikowania całych akapitów.
Odstęp a inne własności
- Letter-spacing – ustawia przestrzeń między literami, a nie między wyrazami;
- Line-height – ustawia odstęp między wierszami, a nie między wyrazami.
Przykład kompletnego kodu HTML+CSS
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Odstępy między wyrazami w HTML</title>
<style>
.duzy-odstep { word-spacing: 20px; }
.maly-odstep { word-spacing: -3px; }
.standardowy-odstep { word-spacing: normal; }
</style>
</head>
<body>
<p class="duzy-odstep">Wyrazy z dużym odstępem.</p>
<p class="maly-odstep">Wyrazy z małym, ujemnym odstępem.</p>
<p class="standardowy-odstep">Wyrazy z odstępem domyślnym.</p>
</body>
</html>
Stosowanie word-spacing w CSS to najwygodniejszy sposób kontrolowania odstępu między słowami w HTML – zapewnia pełną elastyczność i prostotę obsługi w strukturze strony internetowej.
