word-spacing

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

Exemple interactif

Syntaxe

css

/* 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.

Définition formelle

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é
Valeur calculéeune longueur (type length) absolue
Type d'animationune longueur

Syntaxe formelle

word-spacing = 
  normal    |
  <length>

Exemple

HTML

html

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

CSS

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

Specification
CSS Text Module Level 3
# word-spacing-property

Compatibilité des navigateurs

BCD tables only load in the browser