Właściwość CSSTypografia

word-spacing

Zmienia odstępy między wyrazami.

Na tej stronie

Przykład

CSS

.slogan {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: 0.4em;
}

Podgląd

Właściwość word-spacing dodaje dodatkową przestrzeń do każdego odstępu między wyrazami. Wartość ujemna zbliża wyrazy do siebie.

Przydaje się rzadziej niż letter-spacing, ale bywa pomocna przy krojach z bardzo wąską lub bardzo szeroką spacją oraz w napisach dekoracyjnych.

Przy tekście wyjustowanym przeglądarka i tak zmienia odstępy między wyrazami, a word-spacing jest dodawane do tych wyliczonych wartości.

word-spacing: normal | <długość>;

Wartość	Opis
normal	Zwykła spacja kroju.
0.5em	Wyraźnie szersze odstępy między wyrazami.
-2px	Wyrazy bliżej siebie.

normal

Zwykła spacja kroju.

.demo { word-spacing: normal; }

0.5em

Wyraźnie szersze odstępy między wyrazami.

.demo { word-spacing: 0.5em; }

-2px

Wyrazy bliżej siebie.

.demo { word-spacing: -2px; }

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Gdy rozstrzelasz litery przez letter-spacing, zwiększ też word-spacing, żeby wyrazy nadal wyraźnie się od siebie odróżniały.
Nie używaj word-spacing do robienia odstępów w układzie, od tego są marginesy i gap.

Widzisz błąd albo brakuje przykładu? Napisz do nas.