word-spacing
La propriété word-spacing
définit la règle d'espacement utilisée entre les balises et entre les mots.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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 utilise100%
, 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. |
Candidat au statut de recommandation | 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é |
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 |
Compatibilité des navigateurs
BCD tables only load in the browser
Pour contribuer à ces données de compatibilité, vous pouvez envoyer une pull request sur ce dépôt: https://github.com/mdn/browser-compat-data.