OUJOOD.COM
Tutoriel CSS : La propriété text-justify
La propriété text-justify en CSS permet de contrôler la justification du texte dans un élément. Elle détermine comment l'espace est distribué entre les mots et les caractères lorsque text-align: justify est appliqué.
⚠️ Important : La propriété
text-justify ne fonctionne que lorsque text-align: justify est également défini sur l'élément.
Syntaxe générale de la propriété text-justify
La syntaxe générale de la propriété text-justify est la suivante :
text-justify: auto | inter-word | inter-character | none;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.textJustify="inter-word" |
| Applies to: | Éléments de niveau bloc et en ligne |
Valeurs possibles de la propriété text-justify
- auto (par défaut): Le navigateur choisit automatiquement l'algorithme de justification optimal selon les règles de la langue et le contenu.
- inter-word: L'espace est distribué uniquement entre les mots. Recommandé pour la plupart des langues occidentales.
- inter-character: L'espace est distribué entre tous les caractères. Principalement utilisé pour les langues asiatiques (chinois, japonais, coréen).
- none: Désactive la justification du texte, même si
text-align: justifyest défini.
Démonstrations interactives
Comparaison visuelle des différentes valeurs
Texte de démonstration : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
text-justify: auto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
text-justify: inter-word
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
text-justify: inter-character
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
text-justify: none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Exemples pratiques d'utilisation de la propriété text-justify
Voici quelques exemples d'utilisation de la propriété text-justify avec du code CSS moderne :
/* Exemple 1: Justification pour un article de blog */
.article-content {
text-align: justify;
text-justify: auto;
line-height: 1.6;
max-width: 600px;
}
/* Exemple 2: Justification entre mots pour du texte occidental */
.justified-text {
text-align: justify;
text-justify: inter-word;
hyphens: auto; /* Améliore la justification */
}
/* Exemple 3: Désactiver la justification sur mobile */
@media (max-width: 768px) {
.justified-text {
text-justify: none;
text-align: left;
}
}
/* Exemple 4: Justification pour langues asiatiques */
.asian-text {
text-align: justify;
text-justify: inter-character;
writing-mode: horizontal-tb;
}
Astuces et conseils d'utilisation de la propriété text-justify
Voici quelques astuces et conseils pour utiliser au mieux la propriété text-justify:
- Utilisez "auto" par défaut : La justification automatique (auto) est souvent la meilleure option car elle s'adapte automatiquement à la langue du contenu.
- Combinez avec "hyphens" : Ajoutez
hyphens: autopour améliorer la qualité de la justification en permettant la césure des mots. - Attention aux écrans étroits : La justification peut créer de grands espaces sur mobile. Considérez désactiver la justification sur petits écrans.
- "inter-word" pour le texte occidental : Cette valeur convient mieux aux langues qui utilisent des espaces entre les mots (français, anglais, etc.).
- "inter-character" pour l'asiatique : Réservez cette valeur aux langues asiatiques (chinois, japonais, coréen) qui n'utilisent pas d'espaces.
- Testez la lisibilité : La justification peut parfois nuire à la lisibilité, surtout avec des colonnes étroites.
- Évitez les lignes courtes : La justification fonctionne mal sur les titres ou les textes sur une seule ligne.
Cas d'usage recommandés
✅ Quand utiliser text-justify :
- Articles de blog et contenu éditorial long
- Documentation technique avec paragraphes substantiels
- Livres électroniques et magazines en ligne
- Texte dans des colonnes larges (>400px)
❌ Quand éviter text-justify :
- Titres et en-têtes
- Listes et éléments de navigation
- Texte court (moins de 2-3 lignes)
- Colonnes étroites sur mobile
- Texte avec beaucoup de mots techniques ou d'URLs
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Version | Oui* | 11 | 55 | 10.0.3 | Oui* |
| Notes | * Support partiel : seules certaines valeurs sont supportées selon le navigateur | ||||
📱 Note sur la compatibilité :
- Internet Explorer supporte une syntaxe légèrement différente avec des valeurs supplémentaires
- Safari a un support limité de certaines valeurs
- Toujours tester sur différents navigateurs et appareils
- Prévoir un fallback avec
text-align: justifyseul
Code de fallback recommandé
/* Approche progressive pour la compatibilité */
.justified-content {
text-align: justify; /* Fallback basique */
text-justify: inter-word; /* Amélioration moderne */
hyphens: auto; /* Meilleure césure */
/* Désactiver sur petits écrans */
@media (max-width: 600px) {
text-align: left;
text-justify: none;
}
}