Comment puis-je justifier la dernière ligne de texte d'un DIV dans les navigateurs ?

Justifier la dernière ligne d'un DIV

Malgré les problèmes logiques soulevés dans la requête d'origine, nous pouvons clarifier comment aligner le texte : justifier la dernière ligne d'un DIV. Habituellement, cette ligne de terminal s'aligne souvent vers la gauche au lieu de suivre les règles de justification du texte.

Pour résoudre ce problème, nous présentons une solution complète compatible avec plusieurs navigateurs, y compris IE6 et les versions ultérieures.

La méthode multi-navigateurs

Cette méthode exploite deux clés techniques :

text-align-last: justifier;: Cette propriété CSS est spécifiquement conçue pour justifier la dernière ligne de texte dans un élément de niveau bloc. Cependant, il n'est pris en charge que par Internet Explorer.

:after Pseudo-Content with Inline-Block:

Cette technique utilise le pseudo-élément :after pour insérer un élément de bloc en ligne invisible après le DIV. Cet élément est ensuite stylisé pour avoir une largeur de 100 %, occupant effectivement toute la largeur du DIV et forçant le texte à se justifier dans toute son étendue.

Implémentation CSS

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Gestion d'un seul élément -Line Text

Dans les cas où le DIV ne contient qu'une seule ligne de texte, une règle CSS supplémentaire est nécessaire pour empêcher qu'une ligne vide supplémentaire ne soit ajoutée par le :after pseudo-élément.

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Ressources supplémentaires

Pour plus de détails et d'informations sur cette technique, reportez-vous à :

[CSS multi-navigateurs : justifier le paragraphe de la dernière ligne Texte](http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!