Propriété CSS word-wrap
Utilisez la propriété CSS word-wrap pour couper les mots insécables et les adapter au conteneur. Découvrez les valeurs et des exemples.
La propriété word-wrap coupe les mots longs qui ne peuvent pas être coupés autrement, afin qu'ils tiennent dans leur conteneur au lieu de déborder au-delà de son bord.
Normalement, un navigateur ne coupe le texte qu'aux « opportunités de saut souple » — espaces, traits d'union et caractères similaires. Une longue chaîne sans une telle opportunité (une URL, un hash, un nom chimique, un identifiant long) n'a nulle part où s'enrouler, si bien qu'elle déborde d'une boîte étroite et peut casser votre mise en page. word-wrap permet au navigateur de couper à l'intérieur d'un tel mot en dernier recours.
Quand l'utiliser
Utilisez word-wrap chaque fois qu'un texte généré par l'utilisateur ou imprévisible peut être plus long que son conteneur :
- Les URL et chemins de fichiers affichés dans une carte ou une barre latérale à largeur fixe.
- Les adresses e-mail, noms d'utilisateur ou jetons dans une colonne étroite.
- Les longues chaînes non coupées dans des tableaux, des bulles de discussion ou des fils de commentaires.
- Toute mise en page responsive où vous ne pouvez pas garantir l'endroit où le texte se coupe.
Cela n'est important que pour les mots qui ne peuvent pas s'enrouler autrement. La prose normale se coupe déjà aux espaces, donc la propriété n'a aucun effet visible dans ce cas.
word-wrap vs. overflow-wrap
word-wrap est le nom original de Microsoft pour ce que la spécification CSS a ensuite standardisé sous le nom overflow-wrap. Les deux sont des alias — ils font exactement la même chose et acceptent les mêmes valeurs. Les navigateurs associent word-wrap à overflow-wrap en interne.
Utilisez overflow-wrap dans le nouveau code pour la conformité aux standards ; conservez word-wrap si vous devez prendre en charge de très anciens navigateurs, car certains moteurs hérités ne reconnaissent que l'ancien nom.
Ne confondez pas word-wrap avec word-break. word-wrap/overflow-wrap ne coupe un mot que s'il déborderait autrement — les mots normaux restent intacts. word-break: break-all est plus agressif : il coupe les mots à n'importe quel caractère, même lorsqu'ils tiendraient. Choisissez word-wrap lorsque vous voulez un retour à la ligne propre qui n'intervient qu'en cas d'urgence.
word-wrap est l'une des propriétés CSS3, et elle ne prend effet que lorsque la propriété white-space autorise le retour à la ligne (par exemple, elle n'a aucun effet avec white-space: nowrap).
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Oui. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.wordWrap = "break-word"; |
Syntaxe
Valeurs CSS word-wrap
word-wrap: normal | break-word | initial | inherit;Exemple de la propriété word-wrap avec la valeur "normal" :
Exemple de code CSS word-wrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 120px;
border: 1px solid #666;
word-wrap: normal;
}
</style>
</head>
<body>
<h2>Word-wrap property example</h2>
<div>
Lorem Ipsum is
<strong>simplysimplysimplysimplysimplysimply</strong>
dummy text of the printing and typesetting
<strong>industryindustryindustryindustryindustry</strong>.
</div>
</body>
</html>Résultat
Avec normal, les longues chaînes simply... et industry... n'ont pas d'opportunité de coupure, elles dépassent donc la boîte de 120px.
Exemple de la propriété word-wrap avec la valeur "break-word" :
Exemple CSS word-wrap break-word
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 120px;
border: 1px solid #666;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>Word-wrap property example</h2>
<div>
Lorem Ipsum is
<strong>simplysimplysimplysimplysimplysimply</strong>
dummy text of the printing and typesetting
<strong>industryindustryindustryindustryindustry</strong>.
</div>
</body>
</html>Avec break-word, le navigateur peut désormais diviser ces longues chaînes au milieu du mot au bord de la boîte, de sorte que le contenu reste bien à l'intérieur de son conteneur de 120px.
Valeurs
| Valeur | Description |
|---|---|
| normal | Coupe les mots uniquement aux points de coupure autorisés. C'est la valeur par défaut. |
| break-word | Permet de couper les mots insécables s'ils dépassent la largeur du conteneur. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Propriétés associées
- overflow-wrap — le nom standardisé pour le même comportement ; préférez-le dans le nouveau code.
- word-break — une coupure plus agressive qui peut diviser les mots même lorsqu'ils tiendraient.
- white-space — contrôle si le texte revient à la ligne ou non ;
word-wrapne s'applique que lorsque le retour à la ligne est autorisé. - word-spacing — ajuste l'espacement entre les mots (sans rapport avec la coupure, mais facile à confondre par le nom).