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

Alignement de la dernière ligne d'un div avec du texte justifié

Dans certains scénarios, il devient nécessaire d'aligner la dernière ligne d'un div avec texte justifié. Bien qu'il ne s'agisse généralement pas d'un comportement standard pour les div, une méthode multi-navigateurs peut obtenir cet effet souhaité.

La mise en œuvre nécessite une combinaison de text-align-last: justifier; et une variante de la méthode de pseudo-contenu :after. La combinaison CSS répond avec succès à la compatibilité des navigateurs, y compris IE6.

Pour appliquer cette méthode :

CSS :

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

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

Remarque : Si votre div ne contient qu'une seule ligne de texte, du CSS supplémentaire est nécessaire pour éviter qu'une ligne vide supplémentaire ne s'affiche. apparaissant :

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

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

Cette technique garantit avec succès que la dernière ligne d'un div s'aligne sur le texte justifié, offrant ainsi une plus grande flexibilité dans le formatage du texte pour divers besoins de conception Web.

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!