Explication détaillée de la façon dont CSS implémente le retour à la ligne automatique des nombres anglais et continus

Pour les éléments de niveau bloc tels que p et p

Les sauts de ligne de texte normaux (texte asiatique et texte non asiatique) ont l'espace blanc par défaut : normal, après le largeur définie Retour à la ligne automatique :

　html<p 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 ; saut de ligne

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

ou

#wrap{word-wrap:break-word; width:200px;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

Effet : des sauts de ligne peuvent être obtenus

2. (Navigateur Firefox) Des sauts de ligne pour les caractères anglais continus et les chiffres arabes, toutes les versions de Firefox Ce problème n'a pas été résolu. On peut seulement masquer les caractères au-delà de la limite ou ajouter des barres de défilement au conteneur

#wrap{word-break:break-all; width:200px; overflow:auto;}
　　<p 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

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

Effet : masquer le contenu en excès Contenu

2. (navigateur IE) utilisez table-layout : fixe pour forcer la largeur du tableau, le td intérieur, il utilise word- ; break: break-all; ou word-wrap: break-word; saut de ligne

<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 : le retour à la ligne est possible

3. (Navigateur IE) Lors de l'imbrication de p, p, etc. dans td, th, utilisez la méthode de retour à la ligne p, p mentionnée ci-dessus

　4. (navigateur Firefox) utilisez table-layout:fixed pour forcer la largeur du tableau, le td interne, th utilise ; word-break: break-all; ou word-wrap: break-word; pour envelopper la ligne, utilisez overflow :hidden;Hide Beyond content, ici overflow:auto ne fonctionne pas

<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. (Périphérique du navigateur Firefox) Nest p, p, etc. dans td, th et utilisez la méthode mentionnée ci-dessus pour gérer Firefox pour exécuter le boîte à code. Finalement, les chances que cela se produise sont très faibles.

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!