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

Justifier la dernière ligne d'un DIV : une approche globale

Justifier la dernière ligne d'un DIV peut présenter un défi, car il s'agit généralement d'une s'aligne à gauche par défaut. Cependant, il existe une méthode qui résout efficacement ce problème dans tous les navigateurs, y compris IE6 et au-delà.

Cette méthode utilise une combinaison de propriétés CSS :

• text-align- last : justifier :Introduite par Microsoft, cette propriété est prise en charge par les navigateurs IE.
• :après pseudo-contenu : Ce pseudo-élément crée un bloc en ligne invisible qui étend la largeur du DIV.

De plus, pour gérer les éléments de texte sur une seule ligne, ce qui suit est recommandé :

• Réglez la hauteur et la hauteur de ligne de l'élément sur 1em pour éviter un espace inutile line.

Implémentation CSS :

Pour justifier la dernière ligne d'un DIV, les règles CSS suivantes peuvent être utilisées :

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

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

Pour les éléments de texte d'une ligne, les éléments suivants sont nécessaires :

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

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

Détaillé Explication :

• text-align-last: justifier: Spécifie l'alignement de la dernière ligne d'un élément de bloc.
•  : après pseudo-contenu : Crée un bloc en ligne vide qui étend la largeur du DIV pour garantir que la propriété text-align: justifier s'applique au dernier line.
• Hauteur et hauteur de ligne : Pour les éléments de texte d'une seule ligne, définir la hauteur et la hauteur de ligne sur 1em empêche une ligne vide qui apparaîtrait autrement après la dernière ligne justifiée.

Cette approche combinée garantit que la dernière ligne d'un DIV est justifiée dans plusieurs navigateurs, offrant ainsi une mise en page professionnelle et esthétique.

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!