la propriété CSS text-justify définit le type de justification à appliquer au texte justifié (par exemple avec text-align: justify;).

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute;

Valeur initialeauto
Applicabilitééléments en ligne et à ceux qui sont des cellules de tableau
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété text-justify peut être définie grâce à l'un des mots-clés suivants.

Valeurs

none
Le texte ne sera pas justifié— cela aura le même effet que de ne pas définir text-align, mias cela peut se révéler utile pour activer ou désactiver globalement la justification.
auto

Le navigateur choisira la meilleure justification pour la situation, en se basant sur le rapport entre performance et qualité, mais également sur la valeur la plus appropriée par rapport à la langue (français, langues CJK, etc.). C'est la propriété par défaut, qui est appliquée lorsque text-justify n'est pas définie.

inter-word
Le texte est justifié en ajustant les espaces entre les mots (en faisant varier word-spacing) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen.
inter-character
Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier letter-spacing) ;  cette propritété est plus appropriée pour des langues comme le Japonais.
distribute
Même effet que inter-character ; cette valeur sert uniquement à de fins de compatibilité.

Syntaxe formelle

auto | inter-character | inter-word | none

Exemples

<p class="none"><code>text-justify: none</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="auto"><code>text-justify: auto</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="dist"><code>text-justify: distribute</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="word"><code>text-justify: inter-word</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="char"><code>text-justify: inter-character</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

Spécifications

Spécification État Commentaires
CSS Text Module Level 3
La définition de 'text-justify' dans cette spécification.
Version de travail  

Compatibilité avec les navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet Oui
Notes Désactivée
Support complet Oui
Notes Désactivée
Notes inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Désactivée This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Support complet 14
Notes
Support complet 14
Notes
Notes Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Firefox Support complet 55IE Support complet 11
Notes
Support complet 11
Notes
Notes Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Opera Support complet Oui
Notes Désactivée
Support complet Oui
Notes Désactivée
Notes inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Désactivée This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari Aucun support NonWebView Android Aucun support NonChrome Android Support complet Oui
Notes Désactivée
Support complet Oui
Notes Désactivée
Notes inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Désactivée This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Mobile Support complet 14
Notes
Support complet 14
Notes
Notes Standard values inter-character and none are supported. The deprecated distribute value is also supported.
Firefox Android Support complet 55Opera Android Support complet Oui
Notes Désactivée
Support complet Oui
Notes Désactivée
Notes inter-word and distribute (deprecated) values are supported, but distribute behavior is buggy.
Désactivée This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari iOS Aucun support NonSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Joel-Costamagna
Dernière mise à jour par : SphinxKnight,