Solution de saut de ligne forcé par contrôle CSS

1. J'ai trouvé le problème
Dans des circonstances normales, les éléments ont l'espace blanc par défaut : normal (retour à la ligne automatique, espace blanc : nowrap s'il ne s'agit pas d'un retour à la ligne). Lorsque le texte saisi dépasse la largeur définie, il est utilisé. sera automatiquement renvoyé. Mais lorsque les données saisies sont un tas de caractères, de lettres ou de chiffres sans espaces (les données normales ne devraient pas être là, mais certains testeurs le font de cette façon), si elles dépassent la largeur du conteneur, le conteneur sera automatiquement renvoyé. développé sans sauts de ligne.

2. Solution
Prenons div comme exemple
div{
word-break:break-all;
word-wrap:break-word;
>

3. Explication de la différence
① Compréhension de la troncature
word-break:break-all
Si le div fait 200 px de large, son contenu sera automatiquement renvoyé à 200 px. Il y a un très long mot anglais « congratulation » à la fin de la ligne. Le mot sera tronqué pour que la fin de la ligne soit « conra » et la ligne suivante soit « tulation ».

word-wrap:break-word
L'exemple est le même que ci-dessus, mais la différence est qu'il félicitera le mot entier dans son ensemble si la fin de la ligne n'est pas assez large pour. affichera le mot entier, il félicitera automatiquement le mot entier. Le mot est placé sur la ligne suivante sans être tronqué.

② Versions prises en charge
word-break;break-all Versions prises en charge : IE5 et versions ultérieures Ce comportement est le même que celui normal dans les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique.
word-wrap:break-word Versions prises en charge : IE5.5 et versions ultérieures Le contenu sera renvoyé à la ligne dans les limites. Si nécessaire, des coupures de mots se produiront également. La table s'enroule automatiquement pour éviter de s'étirer.

③ Syntaxe
word-break: normal | break-all | keep-all
normal : conformément aux règles de texte des langues asiatiques et non asiatiques, les sauts de ligne dans les mots sont autorisés
break- all : Le comportement est le même que celui normal pour les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique
keep-all : Identique à la normale pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Convient au texte non asiatique contenant une petite quantité de texte asiatique

word-wrap : normal | break-word
normal : Autoriser le contenu à dépasser la limite spécifiée du conteneur
break-word : Content s'enroulera dans la limite. Si nécessaire, un saut de mot se produit également. Description : définit ou récupère s'il faut couper la ligne lorsque la ligne actuelle dépasse la limite du conteneur spécifié.

4. Notes
① Si vous constatez que l'un d'eux pour contrôler les sauts de ligne n'est pas valide, écrivez-en deux. Par exemple, td{ word-break:break-all;word-wrap:break-word }
②word-break affichera des problèmes lorsqu'il sera détecté par 3C, ce qui entraînera des problèmes dans les instantanés Baidu. Cet attribut n'est pas pris en charge par OPERA. Navigateur FIREFOX. L'attribut word-break peut être remplacé par white-space:normal, afin que les sauts de ligne puissent être corrects sous FireFox et IE. De plus, il convient de noter que les espaces entre les mots ne peuvent pas être utilisés à la place, sinon la ligne. les pauses ne seront pas correctes.

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!