Propriété CSS overflow-wrap
La propriété CSS overflow-wrap spécifie si le navigateur doit couper les mots pour éviter le débordement. Valeurs, description et exemples.
La propriété overflow-wrap indique au navigateur s'il est autorisé à couper une chaîne normalement insécable — un mot long, une URL ou un hash — pour la placer sur une nouvelle ligne, afin que le texte ne déborde pas de son conteneur.
En temps normal, CSS n'insère des retours à la ligne qu'aux « opportunités de retour à la ligne souple » telles que les espaces et les traits d'union. Une longue chaîne sans aucun de ces caractères (supercalifragilisticexpialidocious ou https://example.com/a/very/long/path) n'a nulle part où s'enrouler et déborde donc de sa boîte. overflow-wrap vous permet d'autoriser une coupure à l'intérieur de cette chaîne en dernier recours.
Quand l'utiliser
Utilisez overflow-wrap lorsque le contenu est généré par l'utilisateur ou imprévisible — commentaires, requêtes de recherche, adresses e-mail, liens, identifiants de code. Ce sont précisément les chaînes qui n'ont pas de points de coupure naturels et qui peuvent faire exploser une colonne à largeur fixe, une carte ou un élément flex. Une règle défensive courante est :
.user-content {
overflow-wrap: break-word;
}Cela préserve la mise en page sans affecter le texte normal, car la coupure n'intervient que lorsqu'un mot déborderait autrement.
Les valeurs en un coup d'œil
La propriété overflow-wrap possède trois valeurs significatives — normal, break-word et anywhere — ainsi que les mots-clés CSS universels initial et inherit.
normal— la valeur par défaut. Les mots ne se coupent qu'aux opportunités normales (espaces, traits d'union). Un mot trop long déborde.break-word— un mot long se coupe à un point arbitraire uniquement s'il déborderait autrement. De manière cruciale, cela ne réduit pas la largeur intrinsèque minimale de l'élément, et perturbe donc rarement le reste de la mise en page.anywhere— commebreak-word, mais l'opportunité de coupure est prise en compte lorsque le navigateur calcule la taille de contenu minimale de l'élément, de sorte qu'un élément flex ou grid peut se rétrécir en dessous de la largeur de son mot le plus long.
overflow-wrap est le nom standard de l'ancienne propriété word-wrap. word-wrap est conservé comme alias pour la compatibilité ascendante — ils acceptent les mêmes valeurs et se comportent de manière identique. Utilisez overflow-wrap dans le nouveau code.
overflow-wrap vs word-break
overflow-wrap et word-break influencent tous deux les endroits où les lignes peuvent se couper, mais ils répondent à des questions différentes.
overflow-wrapcoupe un mot uniquement en dernier recours, lorsqu'il déborderait autrement, quelle que soit la langue.word-breakcontrôle la coupure de manière proactive. Il est principalement conçu pour les langues CJK (chinois, japonais, coréen) où les coupures entre caractères sont normales, et sa valeurbreak-allcoupe les mots latins au milieu d'un caractère même lorsqu'ils auraient tenu.
Règle générale : utilisez overflow-wrap: break-word pour éviter le débordement sans modifier le retour à la ligne normal ; utilisez word-break: break-all uniquement lorsque vous souhaitez vraiment une coupure agressive au niveau des caractères.
Pour couper les mots aux limites de syllabes significatives avec un trait d'union, consultez la propriété hyphens, et pour contrôler les espaces et le retour à la ligne en général, consultez white-space.
Résumé de la propriété
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Oui. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.overflowWrap = "normal"; |
Syntaxe
Syntaxe CSS de overflow-wrap
overflow-wrap: normal | anywhere | break-word | initial | inherit;Notez que l'ordre des valeurs de mots-clés importe dans les déclarations de style abrégé, mais pour overflow-wrap vous définissez simplement une valeur à la fois.
Exemple de la propriété overflow-wrap
Chaque paragraphe ci-dessous est limité à 200px. La longue chaîne dummydummy… ne contient pas d'espaces, donc avec normal elle déborde, tandis que break-word et anywhere la forcent à s'enrouler à l'intérieur de la boîte.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 200px;
margin: 3px;
background: #ccc;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
.normal {
overflow-wrap: normal;
}
</style>
</head>
<body>
<h2>Overflow-wrap property example</h2>
<h3>Overflow-wrap: normal</h3>
<p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: anywhere</h3>
<p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: break-word</h3>
<p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| normal | Les lignes ne se coupent qu'en suivant les règles normales de retour à la ligne. Les mots ne se coupent pas même s'ils débordent du conteneur. C'est la valeur par défaut de cette propriété. |
| anywhere | Les mots longs ou les URL se coupent à n'importe quel point s'il n'existe pas d'autres points de coupure acceptables dans la ligne. Les caractères de trait d'union ne sont pas considérés comme des points de coupure acceptables, même si la propriété hyphens est définie. |
| break-word | Les mots longs ou les chaînes qui ne tiennent pas dans leur conteneur se coupent à un point arbitraire pour forcer un retour à la ligne. Les opportunités de retour à la ligne souple ne sont pas prises en compte lors du calcul de la taille de contenu minimale de l'élément. |
| initial | Donne à la propriété sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |