Comment utiliser word-break:break-all pour forcer une nouvelle ligne ?

Dans des circonstances normales, les éléments ont la valeur par défaut white-space:normal (retour à la ligne automatique, PS : aucun retour à la ligne n'est white-space:nowrap lors de la saisie du texte). dépasse la définition sera automatiquement renvoyé après la largeur du conteneur, mais lorsque les données saisies sont un tas de caractères ou de lettres ou de chiffres sans espaces (les données normales ne devraient pas être là, mais certains testeurs le feront de cette façon), cela apparaîtra lorsque la largeur du conteneur est dépassée. Agrandissez le conteneur sans l'emballer.

Solution (utilisant IE, Chrome, FF comme navigateurs de test) :

{　　word-break:break-all;
　　 word-wrap:break-word;
}

Voici la différence entre les deux méthodes :

1, mot -break:break-all Par exemple, si la largeur du div est de 200 px, son contenu sera automatiquement renvoyé à 200 px. S'il y a un long mot anglais à la fin de la ligne (félicitations, etc.), il sera tronqué. le mot et devenir La fin de cette ligne est conra (la partie frontale de félicitation), et la ligne suivante est la partie back-end de tulation (conguatulation).

2, word-wrap:break-word L'exemple est le même que ci-dessus, mais la différence est qu'il traitera l'intégralité du mot de félicitation dans son ensemble. la fin de la ligne n'est pas assez large pour afficher le mot entier, il mettra automatiquement le mot entier sur la ligne suivante sans tronquer le mot.

3, word-break:break-all Version prise en charge : IE5 ou supérieur 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 Version prise en charge : IE5.5 ou supérieure Le contenu sera renvoyé dans les limites. Si nécessaire, une coupure de mot se produira également. La table s'enroule automatiquement pour éviter de s'étirer.

Syntaxe : word-break : normal | break-all | keep-all
Paramètres : 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

Syntaxe : word-wrap : normal | break-word
Paramètres : normal : autoriser le contenu à pousser contre la limite spécifiée du conteneur
　break-word : le contenu s'enroulera dans les limites. 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é.

Suggestion : la détection 3C des sauts de mots affichera des problèmes, qui entraîneront également des problèmes dans les instantanés Baidu - cet attribut du navigateur OPERA FIREFOX ne prend pas en charge l'attribut de saut de mots. Vous pouvez utiliser des espaces. :normal ; pour le remplacer, afin que les sauts de ligne puissent être corrects sous FireFox et IE. Veuillez également noter que les espaces entre les mots ne peuvent pas être utilisés pour les remplacer, sinon les sauts de ligne ne seront pas corrects.

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!