Maison  >  Article  >  interface Web  >  Utilisez CSS pour contrôler les tableaux ou les cellules afin de forcer les sauts de ligne afin d'éviter que le tableau ne soit agrandi par des mots anglais ou un échange Chinese_Experience

Utilisez CSS pour contrôler les tableaux ou les cellules afin de forcer les sauts de ligne afin d'éviter que le tableau ne soit agrandi par des mots anglais ou un échange Chinese_Experience

WBOY
WBOYoriginal
2016-05-16 12:04:142186parcourir
Pour les éléments de niveau bloc tels que div et p
Le retour à la ligne de texte normal (texte asiatique et texte non asiatique), les éléments ont l'espace blanc par défaut : normal, qui sera automatiquement renvoyé après la largeur définie
html
Les éléments d'habillage de texte normal (texte asiatique et non asiatique) ont l'espace blanc par défaut : normal, lorsqu'ils sont définis

css
#wrap{espace blanc : normal; width :200px; }
1. (navigateur IE) Pour les caractères anglais continus et les chiffres arabes, utilisez word-wrap: break-word; ou word-break:break-all pour obtenir un saut de ligne forcé
#wrap{word -break:break-all; width:200px;}
ou
#wrap{word-wrap:break-word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effet : des sauts de ligne peuvent être obtenus
2. (Navigateur Firefox) Des sauts de ligne de caractères anglais continus et de chiffres arabes. Toutes les versions de Firefox ne résolvent pas ce problème. Nous pouvons uniquement masquer les caractères au-delà de la limite ou ajouter un défilement. barres au conteneur
#wrap{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Effet : le conteneur est normal, le contenu est masqué
pour le tableau
1 . (navigateur IE) Utilisez table-layout:fixed pour forcer la largeur du tableau et masquer le contenu en excès




abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss






abcdefghigklmnopqrstuvwxyz 1234567890
abcdefghigklmnopqrstuvwxyz 1234567890

Effet : Masquer le contenu redondant
2. navigateur) use table-layout:fixed; Pour forcer la largeur du tableau, le td interne, utilise word-break: break-all ou word-wrap: break-word






abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz 1234567890 td> abcdefghigklmnopqrstuvwxyz 1234567890 Effet : sauts de ligne sont possibles3. (navigateur IE) dans td, divs imbriqués, p, etc. dans th, utilisez la méthode de saut de ligne de div et p mentionnée ci-dessus 4. (navigateur Firefox) Utilisez table-layout:fixed; pour forcer la largeur du tableau et le td intérieur, utilisez word-break : break-all; ou word-wrap : break-word; utilisez overflow:hidden pour masquer le contenu en excès, overflow:auto; ne fonctionnera pas ici
abcdefghigklmnopqrstuvwxyz1234567890 abcdefghigklmnopqrstuvwxyz1234567890
Déclaration:
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