Maison > interface Web > tutoriel CSS > Comment puis-je empêcher les mots longs de déborder dans un DIV ?

Comment puis-je empêcher les mots longs de déborder dans un DIV ?

Susan Sarandon
Libérer: 2024-12-16 19:42:17
original
986 Les gens l'ont consulté

How Can I Prevent Long Words from Overflowing in a DIV?

Surmonter les débordements de mots longs dans les DIV

Un défi courant rencontré lorsque l'on travaille avec des éléments DIV est le texte qui dépasse la largeur du DIV, ce qui entraîne un débordement de contenu en dehors du conteneur . Cela est particulièrement évident lorsqu'il s'agit de mots excessivement longs.

Pour résoudre ce problème et garantir que le texte s'adapte parfaitement aux limites du DIV, CSS propose une solution :

Utilisation de overflow-wrap : break- word;

En définissant la propriété overflow-wrap sur break-word, le navigateur brisera automatiquement le mot au point approprié pour l'adapter à la largeur DIV définie. Cela garantit que l'intégralité du texte est visible sans débordement.

div {
  overflow-wrap: break-word;
}
Copier après la connexion

Exemple :

<div>
Copier après la connexion

Utilisation de overflow-wrap : break-word ; forcera le navigateur à ajuster tout le texte dans la largeur DIV spécifiée, en cassant le mot long si nécessaire.

Remarque : Pour la compatibilité avec les navigateurs plus anciens tels que IE6, vous pouvez utiliser le obsolète propriété word-wrap : break-word. Cependant, il est recommandé d'utiliser la propriété moderne overflow-wrap à la place.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal