La propriété word-spacing définit la règle d'espacement utilisée entre les balises et entre les mots.

Syntaxe

/* Avec un mot-clé */
word-spacing: normal;

/* Valeurs de longueur */
/* type <length> */
word-spacing: 3px;
word-spacing: 0.3em;

/* Valeurs en pourcentages */
/* type <percentage> */
word-spacing: 50%;
word-spacing: 200%;

/* Valeurs globales */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

Valeurs

normal
L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.
<length>
Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir <length> pour les différentes valeurs et unités possibles.
<percentage>
Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise -100%, l'espace sera nul et si on utilise 100%, il sera doublé). Voir <percentage> pour les différentes valeurs et unités possibles.

Syntaxe formelle

normal | <length-percentage>


<length-percentage> = <length> | <percentage>

Exemple

HTML

<p id="ligne1">Voici le texte de la ligne 1 </p>
<p id="ligne2" >Et voilà celui de la ligne 2 </p>

CSS

#ligne1 {
  word-spacing: 15px;
}

#ligne2 {
  word-spacing: 5em;
}

Résultat

Accessibilité

Utiliser des valeurs trop importantes (positives ou négatives) pour word-spacing rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.

La bonne valeur à utiliser pour word-spacing doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.

Spécifications

Spécification État Commentaires
CSS Text Module Level 3
La définition de 'word-spacing' dans cette spécification.
Version de travail Remplace les valeurs précédentes avec une valeur <spacing-limit> qui définit la même valeur et la valeur <percentage> et permet d'avoir trois valeurs pour décrire un optimum, un minimum, et un maximum.
CSS Transitions
La définition de 'word-spacing' dans cette spécification.
Version de travail word-spacing peut désormais être animé.
CSS Level 2 (Revision 1)
La définition de 'word-spacing' dans cette spécification.
Recommendation Aucun changement.
CSS Level 1
La définition de 'word-spacing' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Pourcentagesse rapporte à la largeur du glyphe concerné
Médiavisuel
Valeur calculéetrois valeurs, optimale, minimale et maximale, chacune consitant en une longueur absolue, un pourcentage ou le mot-clé normal
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 3.5Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
<percentage> valuesChrome Aucun support NonEdge ? Firefox Support complet 45IE Aucun support NonOpera Aucun support NonSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 45Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Prinz_Rana, fscholz, Sebastianz, teoli, Goofy, louuis, FredB
Dernière mise à jour par : SphinxKnight,