Décrivez les propriétés de «rupture de mots» et de «mot-mot»

La rupture de mots et le débordement de débordement (anciennement des mots) font différemment lorsqu'ils traitent de longs mots ou de contenu incassable. 1. La rupture de mots contrôle comment les mots dans les éléments de bloc brisent les lignes, la rupture oblige les longs mots à se briser, tout gardée évite la rupture, adaptée aux textes chinois, japonais et coréens. 2. Les débordements de débordement se cassent les longs mots lorsque cela est nécessaire pour empêcher le débordement, la rupture est plus intelligente pour juger du contexte. 3. Dans le scénario d'utilisation, utilisez la rupture de mots: Break-All pour le code et utilisez le débordement de débordement: pause pour les commentaires des utilisateurs. 4. Faites attention aux différences de compatibilité des navigateurs et à différents comportements mobiles. Il est recommandé de combiner l'espace blanc ou les traits de tir pour améliorer la lisibilité.

Lorsque vous traitez la disposition du texte dans CSS, en particulier pour les mots longs ou le contenu incassable, word-break et word-wrap (désormais officiellement connu sous le nom de overflow-wrap ) sont deux propriétés qui aident à contrôler la façon dont le texte se casse dans un conteneur. Ils peuvent sembler similaires à première vue, mais ils fonctionnent un peu différemment et sont utilisés dans différents scénarios.

Ce que fait word-break

La propriété word-break contrôle comment les mots se cassent à l'intérieur d'un élément de bloc lorsqu'ils atteignent le bord du conteneur.

• normal - utilise le comportement par défaut (les ruptures dans les espaces autorisés).
• break-all - permet de se briser dans les mots si nécessaire pour empêcher le débordement - utile pour les chaînes comme les URL ou les extraits de code.
• keep-all - empêche la rupture des mots, souvent utilisé pour le texte chinois, japonais ou coréen où les limites des mots ne sont pas claires.

Par exemple, si vous avez une longue chaîne comme verylongwordwithoutspaces , le réglage de word-break: break-all le forcera à s'envelopper en plusieurs lignes même au milieu du mot.

Ceci est particulièrement pratique lors de l'affichage du contenu généré par l'utilisateur qui peut contenir de très longues chaînes - sans elle, ces chaînes pourraient briser votre disposition.

Comment fonctionne word-wrap (ou overflow-wrap )

Bien que son nom, word-wrap ne soit pas vraiment à l'emballage des mots en général - il s'agit davantage de gérer le débordement causé par de longs mots incassables.

Il a deux valeurs principales:

• normal - ne se brise qu'aux points de rupture de mots normaux.
• break-word - permet de se briser dans un mot pour empêcher le débordement (similaire à word-break: break-all , mais un peu plus de contexte).

Vous verrez souvent cela utilisé sur des éléments comme des commentaires ou des bulles de chat, où les utilisateurs peuvent taper ou coller quelque chose comme une clé API ou une longue adresse e-mail qui autrement entraînerait des problèmes de mise en page.

Remarque: word-wrap est désormais officiellement appelé overflow-wrap , bien que les deux noms fonctionnent toujours.

Quand utiliser lequel?

Choisir entre eux dépend du type de contenu que vous traitez et de la stricte de vos besoins de mise en page.

• Utilisez word-break: break-all si vous souhaitez briser agressivement n'importe quel long mot, quelle que soit la langue ou le contexte.
• Utilisez overflow-wrap: break-word si vous voulez être légèrement plus prudent - il essaie de garder des mots entiers intacts, sauf si vous avez absolument nécessaire.

Pensez également à les combiner avec white-space ou à utiliser hyphens pour une meilleure lecture dans certains cas.

Voici une référence rapide:

• Pour les blocs de code ou les journaux → word-break: break-all
• Pour les commentaires ou chats des utilisateurs → overflow-wrap: break-word
• Pour une meilleure trait de géniété (où pris en charge) → Ajouter hyphens: auto

Quelques choses à surveiller

Ces propriétés ne se comportent pas toujours de la même manière dans tous les navigateurs, en particulier les plus âgés.

• Dans certaines versions d'Edge ou de Safari, word-break pourrait ne pas fonctionner exactement comme Chrome.
• La trait de synchronisation ( hyphens ) fonctionne bien dans les navigateurs modernes mais ne s'applique pas à toutes les langues par défaut.
• Les navigateurs mobiles gèrent parfois l'emballage des mots différemment en raison de la taille de l'écran et des comportements de zoom.

Si vous construisez un site ou une application réactif, testez vos styles de rupture de texte sur différents appareils et tailles de fenêtre pour vous assurer que rien ne déborde de façon inattendue.

Fondamentalement, c'est tout.

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!