Comment justifier correctement les éléments de bloc en ligne sans espace vertical supplémentaire ?

Justification de texte appropriée des éléments de bloc en ligne avec "text-align: justifier;"

Plusieurs discussions ont exploré les défis d'une distribution uniforme texte sur les éléments de bloc en ligne en utilisant "text-align: justifier;". Cependant, un problème persistant est l'espace vertical vide qui apparaît sous la ligne d'éléments.

La solution de contournement proposée, comme on le voit dans ce violon, implique de définir "line-height: 0;" sur l'élément parent. Cependant, cela sacrifie toute hauteur de ligne précédemment définie sur les éléments enfants.

Une solution alternative, présentée dans ce violon, résout ce problème sans affecter la hauteur de ligne :

CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Explication

L'affichage : block" sur l'élément ":before" avec une marge inférieure négative élève le texte d'une hauteur de ligne, éliminant ainsi la ligne supplémentaire. La "position : relative" sur les éléments du bloc en ligne neutralise ce déplacement, mais sans ajouter de ligne supplémentaire.

L'utilisation de "em" dans les paramètres de marge inférieure et supérieure s'adapte à toute hauteur de ligne définie comme une valeur multiplicatrice. Cela garantit que le déplacement correspond à la hauteur de ligne prévue.

Future Clean Solution

Une future solution potentielle utilise une propriété de kit Web :

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify; /* IE */
}

Cette méthode fonctionne dans Firefox 12.0 et IE8, mais nécessite l'activation de fonctionnalités expérimentales dans les navigateurs Webkit. Dans Webkit version 39, cette propriété est prise en charge sans l'extension "-webkit-", mais uniquement si les fonctionnalités expérimentales sont activées.

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!