Ce face word-spacing
word-spacing adaugă o distanță suplimentară la fiecare spațiu dintre cuvinte. Valoarea se adună la lățimea spațiului definit de font.
Este folosit rar: la titluri cu litere distanțate (unde și spațiul dintre cuvinte trebuie mărit ca să rămână vizibil), la meniuri scrise ca text simplu sau la fonturi monospațiate.
Valori uzuale
| Valoare | Descriere |
|---|---|
normal |
Spațierea implicită a fontului. |
<lungime> |
Spațiu adăugat la fiecare spațiu dintre cuvinte; poate fi negativ. |
Exemple
Exemplul 1: Titlu distanțat la care cuvintele rămân separate clar
Când mărești letter-spacing, mărește și word-spacing, altfel cuvintele par lipite.
.titlu-eveniment {
text-transform: uppercase;
letter-spacing: 0.2em;
word-spacing: 0.4em;
}Efect vizual în browser
„FESTIVALUL DE JAZZ CLUJ” are litere aerisite, iar între cuvinte rămâne un gol clar mai mare decât între litere.Exemplul 2: Cod sursă afișat mai compact
Fonturile monospațiate au un spațiu lat; o valoare negativă mică îl reduce.
code {
font-family: ui-monospace, monospace;
word-spacing: -0.15em;
}Efect vizual în browser
În textul inline „echo Salut Ana” spațiile dintre cuvinte sunt puțin mai înguste, iar comanda ocupă mai puțin pe rând.Greșeli frecvente
- Folosirea word-spacing pentru a alinia coloane de text; pentru alinieri folosește Flexbox, Grid sau tabele.
- Valori negative mari care fac cuvintele să se suprapună.
Comenzi înrudite
letter-spacing: Mărește sau micșorează spațiul dintre litere, util la titluri mari și la textul scris cu majuscule.text-align: Aliniază textul și elementele inline din interiorul unui bloc (la stânga, centrat, la dreapta sau justificat).white-space (nowrap, pre, pre-wrap, pre-line): Decide dacă spațiile și Enter-urile din text se păstrează și dacă textul trece singur pe rândul următor.