Maison > interface Web > tutoriel CSS > Un exemple d'utilisation de text-align:justify pour aligner les deux extrémités_Experience Exchange

Un exemple d'utilisation de text-align:justify pour aligner les deux extrémités_Experience Exchange

WBOY
Libérer: 2016-05-16 12:07:17
original
1453 Les gens l'ont consulté

text-align:justify ne peut aligner que les deux extrémités de la non-dernière ligne sur plusieurs lignes. Je ne peux rien faire sur une seule ligne. IE a une justification de texte pour résoudre le problème. À propos, pour les utilisateurs non-IE, ma méthode est inutile car elle n'est utilisée que lors d'occasions spéciales.

Exemple de code source [www.52css.com]
.justify{
hauteur:1.1em;
overflow:hidden
text-align:justify; -justify :distribute-all-lines;
}
div.cn:after {
content: "________________________________________"
font-size:100px
}
C'est vrai. IE, j'utilise du contenu et j'ajoute du contenu jusqu'à ce qu'il y ait une deuxième ligne, afin que les extrémités de la première ligne soient alignées.

Cependant, chaque navigateur comprend le chinois différemment. Firefox sépare directement les caractères chinois, tandis qu'Opera ne sépare pas les caractères chinois et ne reconnaît que les espaces. Si vous insérez des caractères anglais en demi-chasse au milieu des caractères chinois, ce sera inégal. Ils ne peuvent pas être séparés sans ajouter des espaces.

L'anglais est meilleur car vous ne pouvez utiliser que des espaces pour séparer les mots, mais IE utilise text-justify :distribute-all-lines pour séparer les mots, ce qui est vraiment moche. Au départ, j'avais pensé à utiliser HTC ou JS pour aider IE, mais j'ai trouvé qu'IE6 était tellement stupide que je ne savais pas quoi faire si je n'avais pas IE7 à la maison.

Ou taper des espaces est une meilleure façon, mais les navigateurs comme Firefox qui agrandissent uniquement le texte seront XX lorsque le texte est agrandi. La mauvaise méthode que j'ai écrite n'est utile que dans certaines circonstances. vie et restez loin de Firefix !

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal