Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
text-justify
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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;
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, mais 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-justifyn'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. distributeObsolète-
Même effet que
inter-character; cette valeur sert uniquement à de fins de compatibilité.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments en ligne et à ceux qui sont des cellules de tableau |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
text-justify =
[ auto | none | inter-word | inter-character | ruby ] ||
no-compress
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
| Specification |
|---|
| CSS Text Module Level 3 # text-justify-property |
Compatibilité des navigateurs
Chargement...