Retour à la ligne automatique CSS_CSS/HTML

Tout le monde sait que l'anglais ou les chiffres continus peuvent faire s'étendre le conteneur et ne peuvent pas être automatiquement enveloppés en fonction de la taille du conteneur. Voici comment les envelopper avec CSS !
Pour div
1. (navigateur IE) white-space:normal; word-break:break-all; Le premier suit ici la norme.

#wrap{white-space:normal width:200px; }
ou
#wrap{word-break:break-all;width:200px;}

ddd111111111111111111111111111

Effet : un saut de ligne peut être obtenu

2 (navigateur Firefox) espace blanc : normal word-break:break-all;overflow:hidden;Idem; Il n'y a pas de bonne méthode d'implémentation dans FF. Vous pouvez uniquement masquer ou ajouter des barres de défilement. Bien sûr, il vaut mieux ne pas ajouter de barres de défilement !

#wrap{white-space:normal width:200px; overflow:auto;}
ou
#wrap{word-break:break-all;width:200px; }

DDD1111111111111111111111111111111111111111

Effet : Le conteneur est normal, le contenu est masqué

pour la table

1. (navigateur IE ) utilisez le style table-layout:fixed;

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890




Effet : Les sauts de ligne sont possibles
2. (Navigateur IE) Utilisez les styles table-layout:fixed et nowrap

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

Effet : peut envelopper

3. (navigateur IE) Utilisez le style table-layout:fixed et nowrap


.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890
Effet : les deux tds s'enroulent normalement 4. (Navigateur Firefox) Utilisez le style table-layout : fixe et nowrap lorsque vous utilisez le pourcentage pour fixer la taille du td, et utilisez div

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

La largeur de cellule ici doit être définie en pourcentageEffet : affichage normal, mais ne peut pas être enveloppé (Remarque : il n'existe pas de bon moyen d'envelopper le contenu du conteneur sous FF. Vous pouvez uniquement utiliser le débordement pour masquer le contenu supplémentaire afin d'éviter d'affecter l'effet global)