Text-justify - Astuces CSS | CSS Almanach 2025

La text-justifypropriété en CSS est un compagnon de la text-alignpropriété qui est utilisée pour définir la méthode de justification du texte lorsqu'elle text-alignest définie sur la justifyvaleur.

p ( text-align: justify; text-justify: inter-word; )

Valeurs

inter-word: Spécifie que le texte est justifié en ajustant l'espacement entre les mots, créant ainsi un espacement supplémentaire des mots. Il s'agit en fait d'une variante de la word-spacingpropriété.
inter-character: Spécifie que le texte est justfiied en ajustant l'espacement entre les caractères, créant effectivement un espacement supplémentaire des caractères. Il s'agit en fait d'une variante de la letter-spacingpropriété.
auto: Permet au navigateur de déterminer si la justification est mieux gérée comme inter-wordou inter-character. Cela peut être utile dans les scénarios multilingues où la langue du contenu est inconnue jusqu'à ce qu'elle soit rendue, ce qui permet à l'agent utilisateur du navigateur de choisir en conséquence en fonction de la méthode qui correspond le mieux au contexte de la langue.
none: Désactive les méthodes de justification, supprimant efficacement toute opportunité de justification ou annulant le cas échéant une méthode de justification dans la cascade.

Qu'est-ce que la justification exactement?

Le texte justifié est une manière élégante de dire comment le texte remplit la boîte qui le contient. En fait, vous connaissez peut-être déjà bien le texte de justification et ne le savez même pas. Si vous avez déjà utilisé un logiciel d'édition de texte comme Word et Google Docs, vous connaissez peut-être ces icônes:

Options d'alignement et de justification du texte dans la barre d'outils Google Docs

Ces trois premiers définissent l'alignement du texte, tout comme la text-alignpropriété CSS , où le texte peut être aligné à gauche, à droite ou complètement centré.

Cette quatrième icône est l'option de justification et elle indique au contenu de remplir toute la largeur du document afin que chaque ligne soit alignée jusqu'au bord, qu'elle affecte ou non l'espacement entre les mots.

La justification du contenu dans Google Docs ajoute un espacement entre les mots pour occuper toute la largeur du document à chaque ligne

La text-justifypropriété nous permet de faire de même, mais avec une flexibilité supplémentaire pour déterminer si la méthode d'espacement utilisée pour justifier le contenu est gérée entre des mots ou des caractères.

Prise en charge du navigateur

La text-justifypropriété est incluse dans la spécification CSS Text Module Level 3, qui est actuellement à l'état Brouillon de l'éditeur au moment de la rédaction de cet article.

Cette propriété est actuellement répertoriée comme «à risque» d'être abandonnée pendant la période de recommandation candidate. En tant que tel, il n'est pas recommandé d'utiliser cette propriété en production car il est peu probable qu'elle soit adoptée comme norme dans tous les navigateurs dans un proche avenir.

Le support actuel est limité à Firefox 55+. Internet Explorer 11 et Edge 14+ prennent également en charge la propriété, mais uniquement la inter-wordvaleur ainsi que les valeurs non officielles non incluses dans la spécification W3C.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.