Cet article répertorie les styles CSS recommandés pour les sauts de ligne compatibles avec IE et FF, et détaille les différences entre le retour à la ligne et le saut de mot.
Style de saut de ligne recommandé par CSS compatible avec IE et FF
La meilleure façon est
retour à la ligne : break-word ; débordement : caché ;
au lieu de
retour à la ligne : break-word ; word-break : break-all ;
Ni l'un ni l'autre
retour à la ligne : break-word ; débordement : auto ;
Il n'y a aucun problème sous IE, mais sous FF, les longues chaînes anglaises seront bloquées au-delà du contenu.
La différence entre le retour à la ligne et le saut de mot
Voici le contenu cité :
retour à la ligne :
Par défaut normal. Le contenu dépasse les limites de son conteneur.
break-word Le contenu passe à la ligne suivante et un saut de mot se produit si nécessaire. saut de mot :
normal Par défaut. Permet les sauts de ligne dans les mots. Cela semble fonctionner uniquement pour le texte asiatique.
break-all Se comporte de la même manière que pour le texte asiatique, mais permet à la ligne de se couper arbitrairement pour le texte non asiatique. Cette valeur convient au texte asiatique contenant des extraits de texte non asiatique.
keep-all N'autorise pas la coupure de mots pour le chinois, le japonais et le coréen. Fonctionne de la même manière que d'habitude pour toutes les langues non asiatiques. Cette valeur est optimisée pour le texte comprenant de petites quantités de chinois, de japonais ou de coréen. |
Le résumé est le suivant :
le retour à la ligne contrôle le retour à la ligne.
Lors de l'utilisation de break-word, les sauts de ligne seront forcés. Il n’y a aucun problème avec le chinois, ni avec les phrases en anglais. Mais pour de longues chaînes d’anglais, cela ne fonctionne pas.
break-word contrôle s'il faut couper les mots.
La situation par défaut est normale et les mots anglais ne sont pas divisés.
break-all est un mot de rupture. Lorsqu'un mot atteint une limite, la lettre suivante passe automatiquement à la ligne suivante. Résout principalement le problème des longues chaînes anglaises.
keep-all fait référence à des mots continus chinois, japonais et coréens. C'est-à-dire que si vous utilisez uniquement ce temps sans retour à la ligne, les chinois ne s'enrouleront pas. (Les phrases en anglais sont normales.)
c'est à dire sous :
Utiliser word-wrap:break-word; tout fonctionne bien.
ff ensuite :
Si vous n’utilisez pas ces deux-là, il n’y aura aucun problème avec le chinois. Il n’y aura aucun problème non plus avec les phrases en anglais. Cependant, les longues chaînes en anglais peuvent poser problème.
Afin de résoudre de longues chaînes d'anglais, word-wrap:break-word;word-break:break-all; Cependant, cette méthode entraînera la déconnexion des mots dans les phrases anglaises ordinaires (il en va de même pour ie).
Le principal problème réside actuellement dans la déconnexion de longues chaînes de mots anglais et anglais. En fait, une longue chaîne en anglais n’est qu’un mot relativement long.
Autrement dit, les mots anglais devraient-ils être déconnectés ? Le problème est évident et il ne faut évidemment pas le déconnecter.
Pour les longues chaînes en anglais, c'est malveillant, donc bien sûr, il n'y a pas lieu de s'en inquiéter. Cependant, nous devons également réfléchir à des moyens d’empêcher l’expansion du conteneur.
Utilisez : overflow:auto ; sous ie, les longues chaînes seront automatiquement renvoyées. ff, les longues cordes seront couvertes.
Donc, pour résumer, le meilleur moyen est word-wrap:break-word;overflow:hidden; plutôt que word-wrap:break-word;word-break:break-all;.
word-wrap:break-word;overflow:auto; Il n'y a aucun problème sous IE. Sous ff, les longues chaînes seront partiellement masquées.
De plus, le code du test est le suivant :
Voici le contenu cité :
1.htm================================================ = ==================== <style>
.c1{largeur :300px ; bordure :1px rouge uni}
.c2{ width:300px;word-wrap:break-word; border:1px jaune uni}
.c3{ width:300px;word-wrap:break-word;word-break:break-all border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all border:1px solid blue}
.c5{largeur :300px;word-break:break-all; border:1px solid black}
.c6{largeur :300px;word-break:keep-all; border:1px solid red}
.c7{ largeur:300px;word-wrap:break-word;overflow:auto border:1px; jaune uni}
</style> .c1{largeur :300px ; bordure :1px rouge uni}
<div classe="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c1>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c1>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c1>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> <br>
.c2{ width:300px;word-wrap:break-word; border:1px jaune uni}
<div classe="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c2>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c2>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c2>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> <br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all border:1px solid green}
<div classe="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c3>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c3>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c3>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> <br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all border:1px solid blue}
<div classe="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c4>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c4>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c4>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> <br>
.c5{largeur :300px;word-break:break-all; border:1px solid black}
<div classe="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c5>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c5>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c5>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> <br>
.c6{largeur :300px;word-break:keep-all; border:1px solid red}
<div classe="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c6>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c6>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c6>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> <br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div classe="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div classe=c7>
C'est tout l'anglais. C'est tout l'anglais.
</div>
<div classe=c7>
Tout en chinois. Tout en chinois. Tout en chinois.
</div>
<div classe=c7>
Arrangement mixte de chinois et d'anglais. Chinois et anglais. Arrangement mixte de chinois et d'anglais. Chinois et anglais.
</div> |
