Tutoriel sur l'utilisation de l'attribut word-break en CSS3

Nous savons qu'il existe un attribut word-break très important en CSS3, donc aujourd'hui je vais vous présenter l'attribut word-break. Définition, syntaxe, paramètres et un court exemple utilisant le saut de mot pour aider tout le monde à comprendre.

1. Définissez l'attribut

word-break pour spécifier la méthode de traitement du retour à la ligne automatique. Astuce : En utilisant l'attribut word-break, vous pouvez laisser le navigateur couper une ligne à n'importe quel endroit.

2. Syntaxe et paramètres

word-break : normal (par défaut) | break-all normal : Selon les règles textuelles des langues asiatiques et des langues non asiatiques , autorisé dans les mots Retour à la ligne : le chinois enveloppera les caractères chinois à la limite, et l'anglais enveloppera le mot entier. Si un mot est trop long, il brisera le conteneur. Si la bordure est un attribut fixe, les parties suivantes. ne sera pas affiché. break-all : vous pouvez tronquer de force les mots anglais et forcer l'ajout de nouvelles lignes. 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 : comme d'habitude pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Autrement dit, s'il s'agit de chinois, une phrase en caractères chinois comprise entre les signes de ponctuation précédents et suivants sera complètement renvoyée, et le mot anglais sera également complètement renvoyé. Remarque : Firefox et Opera ne peuvent pas le reconnaître.

3. Description

word-break : break-all est un mot de rupture. Lorsqu'un mot atteint une limite, la lettre suivante passe automatiquement à la ligne suivante. Il résout principalement le problème des longues chaînes d'anglais (cela compense simplement le défaut ci-dessus selon lequel word-wrap:break-word ne fonctionne pas pour les longues chaînes de texte).

4. Exemple

En continuant avec ce qui précède, le mot félicitation appartient à une longue chaîne de mots anglais Word-break:break-all tronquera le mot et la fin de la ligne. deviendra quelque chose comme conra (félicitations La partie front-end), la ligne suivante est la partie back-end de la tulation (conguatulation). Word-break:keep-all fait référence aux mots continus chinois, japonais et coréens. C'est-à-dire que si vous utilisez uniquement ce temps sans retour à la ligne, les chinois ne retourneront pas à la ligne. (Les phrases en anglais sont normales.)

5. Résumé

ne fonctionne que sur les éléments standard de niveau bloc tels que les éléments de table div tels que th et td sont reconnus mais n'ont aucun effet (testé sous Chrome) word-break:break-all est efficace, mais du point de vue d'une compatibilité complète et d'une mémoire pratique, la conclusion précédente prévaudra). Firefox et Opera ne peuvent pas reconnaître le saut de mot, sans parler de l'effet de l'utilisation du saut de mot dans th et td sous Firefox.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Étapes à mettre en œuvre à l'aide de CSS3 pour créer une bordure carrée qui brille progressivement

Qu'en est-il des propriétés d'animation du tutoriel CSS3 sur l'utilisation de

pour créer des effets de goutte d'eau avec H5

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!