Propriété CSSTypographie
word-spacing
Modifie l’espacement entre les mots.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments
- JavaScript
element.style.wordSpacing = "0.3em"
Exemple
#CSS
.slogan {
text-transform: uppercase;
letter-spacing: 0.1em;
word-spacing: 0.4em;
}HTML de l’exemple
<p class="slogan" style="text-transform: uppercase; letter-spacing: 0.1em; word-spacing: 0.4em; margin: 0;">Apprenez en jouant</p>Aperçu
Définition et utilisation
#La propriété word-spacing ajoute de l’espace supplémentaire à chaque espace entre les mots. Une valeur négative rapproche les mots entre eux.
Elle est utile moins souvent que letter-spacing, mais elle peut aider avec des polices dont l’espace est très étroit ou très large, ainsi que dans des textes décoratifs.
Avec du texte justifié, le navigateur modifie de toute façon les espaces entre les mots, et word-spacing s’ajoute à ces valeurs calculées.
Syntaxe
#Syntaxe
word-spacing: normal | <longueur>;Valeurs
#Valeurs en pratique
#normal
L’espace normal de la police.
.demo { word-spacing: normal; }0.5em
Des espaces nettement plus larges entre les mots.
.demo { word-spacing: 0.5em; }-2px
Des mots plus rapprochés.
.demo { word-spacing: -2px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Quand vous écartez les lettres avec
letter-spacing, augmentez aussiword-spacing, pour que les mots restent clairement distincts les uns des autres. - N’utilisez pas
word-spacingpour créer des espacements de mise en page : c’est le rôle des marges et degap.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.