CSS réalise un retour à la ligne automatique pour empêcher le div de se briser et d'affecter la mise en page.

Le problème du retour à la ligne automatique. Le retour à la ligne des caractères normaux est plus raisonnable, mais les nombres continus et les caractères anglais étirent souvent le conteneur, ce qui est assez gênant. Voici comment CSS implémente le retour à la ligne

Pour p. , p et d'autres éléments au niveau du bloc
les éléments d'habillage de ligne de texte normal (texte asiatique et texte non asiatique) ont l'espace blanc par défaut : normal, et s'enroulent automatiquement après la largeur définie
html

< id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义< /p >

css

#wrap{white-space: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;}

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

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 n'ont pas résolu ce problème. Nous pouvons uniquement laisser masquer les caractères qui dépassent la limite ou ajouter des barres de défilement au conteneur

#wrap{word-break:break-all; width:200px; overflow:auto;}

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

Effet : le conteneur est normal et 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

< style="table-layout:fixed" width="200">
<>
<>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
< /td >
< /tr >
< /table >

Effet : masquer le contenu en excès

2. (Navigateur IE) Utilisez table-layout:fixed; pour forcer la largeur du tableau, et le td interne, utilise word-break: break-all ou word-wrap: break-word; break

< width="200" style="table-layout:fixed;">
<>
< width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< /tr >
< /table >

Effet : sauts de ligne

3. (navigateur IE) Imbriquer p, p, etc. dans td, th en utilisant la méthode de saut de ligne de p, p mentionnée ci-dessus

4. (Navigateur Firefox) use table- layout:fixed; applique la largeur du tableau et utilise word-break: break-all ou word-wrap: break-word; ligne, utilisez overflow:hidden; pour masquer le contenu excédentaire. Overflow:auto ne peut pas être utilisé ici. Fonction

< style="table-layout:fixed" width="200">
<>
< width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890< /td >
< width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890< /td >
< /tr >
< /table >

Effet : Masquer plus que le contenu

. 5. (Navigateur Firefox) Imbrication de p, p, etc. dans td, qui adopte ce qui précède Comment gérer Firefox

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour obtenir un calque de masque au survol de la souris

À propos de la façon d'obtenir plusieurs lignes et plusieurs lignes avec la méthode de disposition des colonnes CSS

Comment utiliser CSS pour afficher des points de suspension dans la partie longue du texte du titre

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!