Problème de retour à la ligne automatique, le retour à la ligne des caractères normaux est plus raisonnable, mais les nombres continus et les caractères anglais agrandissent souvent le conteneur, ce qui est un véritable casse-tête. Voici comment implémenter le retour à la ligne en CSS.
Pour les éléments de niveau bloc tels que div et p, les éléments d'habillage de texte normal (texte asiatique et texte non asiatique) ont l'espace blanc par défaut : normal, et ils seront automatiquement renvoyés à la ligne après la largeur définie.
HTML
<div id="wrap">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</div>
css
#wrap{espace blanc:largeur normale: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; largeur:200px;}
ou
#wrap{word-wrap:break-word; largeur:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Effet : des sauts de ligne peuvent être obtenus
2. (Navigateur Firefox) Les sauts de ligne des caractères anglais continus et des chiffres arabes. Toutes les versions de Firefox ne résolvent pas ce problème. Nous pouvons uniquement masquer les caractères qui dépassent la limite ou ajouter des barres de défilement au conteneur.
#wrap{word-break:break-all; largeur:200px; débordement:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Effet : Le conteneur est normal et le contenu est masqué pour la table
(1) (navigateur IE) Utilisez table-layout:fixed pour forcer la largeur du tableau et masquer le contenu excédentaire;
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
Effet : Masquer le contenu redondant
(2) (navigateur IE) utilisez table-layout:fixed; pour forcer la largeur du tableau, le td interne, utilisez word-break: break-all ou word-wrap: break-word;
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
Effet : des sauts de ligne peuvent être effectués
3. (Navigateur IE) Lors de l'imbrication de div, p, etc. dans td, th, utilisez la méthode de retour à la ligne de div et p mentionnée ci-dessus.
4. (Navigateur Firefox) Utilisez table-layout:fixed; pour forcer la largeur du tableau, le td interne, utilisez word-break: break-all ou word-wrap: break-word; Hidden ; pour masquer Au-delà du contenu, overflow:auto ne peut pas fonctionner ici ;
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
Effet : Masquer plus que le contenu
5. (Navigateur Firefox) Nest div, p, etc. dans td, th, etc. Utilisez la méthode mentionnée ci-dessus pour gérer Firefox