word-spacing

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>où 
<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 initiale	`normal`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Pourcentages	se rapporte à la largeur du glyphe concerné
Média	visuel
Valeur calculée	trois valeurs, optimale, minimale et maximale, chacune consitant en une longueur absolue, un pourcentage ou le mot-clé `normal`
Type d'animation	une longueur
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`word-spacing`	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 1	IE Support complet 6	Opera Support complet 3.5	Safari Support complet 1	WebView Android Support complet 37	Chrome Android Support complet 18	Firefox Android Support complet 4	Opera Android ?	Safari iOS Support complet 1	Samsung Internet Android ?
`<percentage>` values	Chrome Aucun support Non	Edge Aucun support Non	Firefox Support complet 45	IE Aucun support Non	Opera Aucun support Non	Safari Support complet 6.1	WebView Android Aucun support Non	Chrome Android Aucun support Non	Firefox Android Support complet 45	Opera Android ?	Safari iOS Support complet 6.1	Samsung Internet Android Aucun support Non

Légende

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