recherche

Maison >interface Web >tutoriel CSS >Comment puis-je justifier la dernière ligne de texte d'un div dans tous les navigateurs ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-10 02:21:12399parcourir

How Can I Justify the Last Line of Text in a Div Across All Browsers?

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!

css if for Property default this http WordPress
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment animer correctement les images d’arrière-plan avec CSS3 ?Article suivant：Comment animer correctement les images d’arrière-plan avec CSS3 ?

Articles Liés

Voir plus