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 assez gênant. Voici comment CSS implémente le retour à la ligne
La meilleure définition CSS du retour à la ligne
code.wrap {. disposition de la table : corrigé ; coupure de mots : tout briser ; débordement : caché ;
Ici débordement : caché ou automatique ;
=================================================== ===============
Pour les éléments de niveau bloc tels que div et p, le retour à la ligne des éléments de texte normal (texte asiatique et texte non asiatique) a l'espace blanc par défaut : normal, et il sera automatiquement renvoyé 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{white-space:normal; width:200px; }
1. (navigateur IE) Pour les caractères anglais continus et les chiffres arabes, utilisez word-wrap: break-word; briser
#wrap{word-break:break-all; width:200px;}
ou
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Effet : des sauts de ligne peuvent être obtenus
2. (Navigateur Firefox) Rupture 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 au-delà de la limite ou ajouter des barres de défilement au conteneur.
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Effet : Le conteneur est normal et le contenu est masqué
pour la table
http://www.knowsky.com/
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 redondant
2. (navigateur IE) utilisez table-layout:fixed; pour forcer la largeur du tableau, le td interne, 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) Imbrication de divs, p, etc. dans td, qui utilise la méthode de retour à la ligne de div et p mentionnée ci-dessus
4. (Navigateur Firefox) Utiliser table-layout : corrigé ;En forçant la largeur du tableau, le td intérieur, utilise word-break: break-all; ou word-wrap: break-word; pour envelopper la ligne, utilisez overflow:hidden pour masquer le contenu en excès, overflow:auto; ; ne fonctionne pas 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 divs, p, etc. dans td, th Utilisez la méthode mentionnée ci-dessus pour gérer Firefox afin d'exécuter la boîte de code. Enfin, le risque de ce phénomène. ce qui se produit est très faible, mais les farces des internautes ne peuvent pas être exclues.
Ce qui suit est l'effet de l'exemple mentionné
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Retour à la ligne de caractères</title>
<style type="text/css">
table,td,th,div { border:1px vert solide;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</tête>
<corps>
<h1><code>div</code></h1>
<h1><code>Tous les espaces : normaux ;</code></h1>
<div style="white-space:normal; width:200px;">Le retour à la ligne se produit toujours dans un élément td dont l'attribut WIDTH est défini sur une valeur inférieure au contenu non enveloppé de la cellule, même si la propriété noWrap est définie sur true Par conséquent, l'attribut WIDTH a priorité sur la propriété noWrap dans ce scénario</div>
<h1><code>IE word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Firefox/ word-break:break-all; h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>tableau</code></h1>
<h1><code>table-layout:fixe;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; débordement:caché;</code></h1>
<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>
</corps>
</html>