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
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-spacingdal suo elemento genitore.
Esempio proprietà: word-spacing
Codice Esempio: word-spacing
.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;
}
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:
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
IP: 216.73.216.192
