Exemple d'utilisation de CSS pour aligner les deux extrémités d'une seule ligne de texte

Dans notre développement front-end WEB quotidien, nous rencontrons souvent des situations où une seule ligne de texte est alignée aux deux extrémités. Elle doit non seulement être alignée, mais également compatible avec tous les navigateurs. Alors, comment CSS parvient-il à l'alignement. les deux extrémités ? Aujourd'hui, je vais vous donner une introduction détaillée à l'exemple d'utilisation de CSS pour aligner les deux extrémités d'une seule ligne de texte !

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

Tout le monde connaît les deux lignes de code ci-dessus. Pour le texte multiligne, il peut fondamentalement être compatible avec tous les navigateurs et obtenir un alignement aux deux extrémités. Dans le texte multiligne, ce style ne gère pas le dernier paragraphe du texte.

Donc, pour texte chinois sur une seule ligne , nous devons patcher

p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

Nous utilisons le sélecteur après pour ajouter du contenu à la fin de le texte d'une seule ligne, cependant, cela entraînera l'ouverture de p, nous devons donc également définir la hauteur. Le code complet est le suivant :

p{
    text-align:justify;
    text-align-last:justify;
    height:24px;
}
 p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

Cette méthode est compatible avec tous les navigateurs grand public, au moins, je n'en ai rencontré aucun qui soit difficile à utiliser. Pour les navigateurs qui ne prennent pas en charge le sélecteur après, veuillez utiliser le selectivize script, reportez-vous à Mon autre blog

文 字 间 要 有 空 格，不 然 不 管 用

Résumé :

Cet article utilise des exemples pour présenter en détail l'implémentation CSS de lignes simples aux deux extrémités de cet article. Exemples d'alignement, je pense que vous comprenez mieux cela, j'espère que cela vous sera utile dans votre travail ! ~

Recommandations associées :

Partage du code d'image et de texte pour obtenir un alignement des deux côtés en CSS3

Exemple de la façon dont le style CSS peut obtenir l'alignement des deux extrémités du texte d'un paragraphe

Explication détaillée de la façon dont CSS peut réaliser un alignement aux deux extrémités

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!