CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS word-spacing

La proprietà CSS word-spacing (CSS3) imposta la spaziatura tra le parole

La proprietà word-spacing permette di regolare lo spazio orizzontale tra le parole di un testo, migliorando la leggibilità o l’estetica di un paragrafo. Può essere impostata con valori di lunghezza o con il valore predefinito normal.

Sintassi

word-spacing: | normal | inherit;

Significato dei valori principali:

  • <lunghezza>: Una misura della spaziatura tra parole, ad esempio 10px, 1em, 0.5rem. Aumenta o riduce lo spazio standard.

  • normal: Valore predefinito, usa la spaziatura standard definita dal font e dal browser.

  • inherit: L’elemento eredita il valore di word-spacing dal suo elemento genitore.


Esempio proprietà: word-spacing


Codice Esempio: word-spacing

CODE: CSSpreleva codice
  1. .text {
  2.   font-size: 18px;
  3.   background-color: #f0f0f0;
  4.   padding: 15px;
  5.   border-radius: 6px;
  6.   margin-bottom: 20px;
  7.   width: 400px;
  8. }
  9. .normal-spacing {
  10.   word-spacing: normal;
  11.   background-color: #50a14f;
  12.   color: white;
  13. }
  14. .wide-spacing {
  15.   word-spacing: 20px;
  16.   background-color: #4a90e2;
  17.   color: white;
  18. }
  19. .narrow-spacing {
  20.   word-spacing: -2px;
  21.   background-color: #f08a5d;
  22.   color: white;
  23. }

Contenuto Esempio: word-spacing

Esempio di utilizzo di word-spacing

In questo esempio viene mostrato come cambiare la spaziatura tra le parole con diversi valori di word-spacing:


Spaziatura normale tra le parole in questo testo di esempio.
Spaziatura aumentata tra le parole in questo testo di esempio.
Spaziatura ridotta tra le parole in questo testo di esempio.

CSS e HTML per l'esempio di word-spacing:

  
  <style>
    .text {
      font-size: 18px;
      background-color: #f0f0f0;
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 20px;
      width: 400px;
    }
    .normal-spacing {
      word-spacing: normal;
      background-color: #50a14f;
      color: white;
    }
    .wide-spacing {
      word-spacing: 20px;
      background-color: #4a90e2;
      color: white;
    }
    .narrow-spacing {
      word-spacing: -2px;
      background-color: #f08a5d;
      color: white;
    }
  </style>

  <div class="text normal-spacing">
    Spaziatura normale tra le parole in questo testo di esempio.
  </div>
  <div class="text wide-spacing">
    Spaziatura aumentata tra le parole in questo testo di esempio.
  </div>
  <div class="text narrow-spacing">
    Spaziatura ridotta tra le parole in questo testo di esempio.
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies