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

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

Susan Sarandon

Libérer： 2024-12-10 02:21:12

original

397 Les gens l'ont consulté

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%;
}

Copier après la connexion

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%;
}

Copier après la connexion

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!

source：php.cn

Article précédent：Comment animer correctement les images d’arrière-plan avec CSS3 ? Article suivant：Comment puis-je contrôler l'ordre des colonnes dans Bootstrap 3 à l'aide de « col-lg-push » et « col-lg-pull » ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2163

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2313

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1950

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...