Propriété CSS text-justify
Utilisez la propriété CSS text-justify pour définir le comportement des espaces entre mots ou caractères. Valeurs et exemples.
La propriété CSS text-justify contrôle comment le navigateur répartit l'espace supplémentaire lorsque du texte justifié est étiré pour remplir chaque ligne. Elle ne prend effet que lorsque text-align est défini sur justify — utilisée seule, elle n'a aucun effet.
Cette page explique ce que fait text-justify, chacune de ses valeurs, quand y recourir, les problèmes de compatibilité navigateur à connaître, et sa relation avec d'autres propriétés d'espacement.
Le problème qu'elle résout
Lorsque vous définissez text-align: justify, le navigateur rembourre chaque ligne pour que les bords gauche et droit soient alignés, comme dans une colonne de journal. Il existe deux façons d'ajouter ce rembourrage : élargir les espaces entre les mots, ou élargir les espaces entre les caractères. text-justify vous permet de choisir la stratégie utilisée par le navigateur, au lieu de laisser l'algorithme par défaut décider.
Cela a de l'importance car la bonne stratégie dépend de la langue. Les langues dont les mots sont séparés par des espaces (anglais, allemand, français) s'affichent généralement mieux avec un espacement supplémentaire entre les mots. Les langues écrites sans espaces entre les mots (comme le chinois, le japonais et le coréen) ne peuvent étirer que entre les caractères, donc inter-character est le choix naturel dans ce cas.
text-justify est l'une des propriétés CSS3.
| Valeur initiale | auto |
|---|---|
| S'applique à | Les éléments de type bloc. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textJustify = "inter-character"; |
Syntaxe
text-justify: auto | inter-word | inter-character | none | initial | inherit;Comme text-justify est inerte sans texte justifié, vous définissez presque toujours les deux ensemble :
p {
text-align: justify; /* turn justification on */
text-justify: inter-word; /* choose how the gaps grow */
}Exemple de la propriété text-justify :
Exemple de code CSS text-justify
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Avec inter-word, les espaces entre les mots s'élargissent jusqu'à ce que chaque ligne atteigne le bord du conteneur. Réduisez la largeur du navigateur et vous verrez les espaces s'étirer davantage sur les lignes qui sont loin de remplir la largeur.
Exemple de la propriété text-justify avec la valeur "inter-character" :
Exemple CSS text-justify avec la valeur inter-character
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Avec inter-character, l'espace supplémentaire est inséré entre les caractères individuels plutôt qu'uniquement entre les mots. Sur un texte latin, l'effet est subtil ; il devient essentiel pour les scripts CJK où il n'y a pas d'espaces entre les mots à élargir.
Compatibilité navigateur et points d'attention
text-justify bénéficie d'un support inégal et présente quelques particularités à connaître avant de l'utiliser :
inter-characterest la valeur supplémentaire la plus fiable, mais le mot-clédistribute, autrefois courant, a été renommé eninter-characteret l'ancien nom est déprécié.nonen'est pas respecté partout. Certains moteurs justifient quand même la dernière ligne ou reviennent à l'algorithme par défaut ; testez plutôt que de supposer que la justification est totalement désactivée.- Le texte justifié peut créer des « rivières » — des canaux irréguliers d'espace blanc qui traversent un paragraphe — surtout dans les colonnes étroites. Associer la justification à
hyphens: autoet une mesure (longueur de ligne) raisonnable les réduit. - La dernière ligne d'un bloc justifié n'est jamais étirée ; elle reste alignée à gauche (ou suit
text-align-last).
En cas de doute, définissez text-justify: auto (ou laissez la propriété non définie) et laissez le navigateur choisir la meilleure stratégie pour la langue du contenu.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
auto | L'algorithme de justification est défini. Le navigateur est autorisé à déterminer si inter-word ou inter-character convient mieux à la justification. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
inter-word | Le navigateur augmente l'espace entre les mots. C'est typique des langues avec des limites de mots claires. | Essayer » |
inter-character | Le navigateur augmente l'espace entre les caractères lors de la justification. | Essayer » |
none | La justification est désactivée. | Essayer » |
initial | Définit la propriété à sa valeur par défaut. | Essayer » |
inherit | Hérite de la propriété de son élément parent. |
Propriétés associées
text-align— la propriété qui doit êtrejustifypour quetext-justifyait un effet.text-align-last— contrôle l'alignement de la dernière ligne d'un bloc justifié.word-spacing— définit directement l'espace entre les mots, indépendamment de la justification.letter-spacing— définit directement l'espace entre les caractères (approche).