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

Justifier la dernière ligne d'un Div

L'alignement du texte par défaut pour la dernière ligne d'un

est souvent aligné à gauche, même lorsque le reste du texte est justifié. Cela peut être frustrant, surtout si vous avez besoin que la dernière ligne soit justifiée pour des raisons d'esthétique ou de lisibilité.

Solution multi-navigateurs

Pour justifier la dernière ligne d'un

dans différents navigateurs, y compris IE6 , vous pouvez utiliser le CSS suivant :

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

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

Cette méthode combine le text-align-last: justifier; propriété, qui est prise en charge par IE, avec une variante de la méthode de pseudo-contenu :after. Il inclut également un correctif pour supprimer l'espace supplémentaire ajouté après les éléments de texte d'une ligne.

Correction du texte d'une ligne

Si votre

ne contient qu'une seule ligne de texte, vous pouvez utiliser le CSS suivant pour éviter la ligne vide supplémentaire que la solution précédente peut provoquer :

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 des informations plus détaillées, reportez-vous à :

• 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!