Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
word-spacing
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriétéword-spacing définit la règle d'espacement utilisée entre les balises et entre les mots.
Exemple interactif
word-spacing: normal;word-spacing: 1rem;word-spacing: 4px;word-spacing: -0.4ch;<section> <p> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </p></section>@font-face { src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); font-family: Amstelvar; font-style: normal;}section { font-size: 1.2em; font-family: Amstelvar;}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
normalL'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.
Définition formelle
| 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 | une longueur (<length>) absolue |
| Type d'animation | unelongueur |
Syntaxe formelle
word-spacing =
normal|
<length-percentage>
<length-percentage> =
<length>|
<percentage>
Exemple
HTML
<p>Voici le texte de la ligne 1</p><p>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) pourword-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 pourword-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 |
| Scalable Vector Graphics (SVG) 2 # WordSpacingProperty |