overflow-wrap
Coupe les mots longs uniquement lorsqu’ils dépasseraient sinon du conteneur.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- non
- S’applique à
- éléments de texte
- JavaScript
element.style.overflowWrap = "anywhere"
Exemple
#.comment {
overflow-wrap: anywhere;
}<div class="comment stage" style="overflow-wrap: anywhere; width: 240px;">Super cours ! Mon projet : https://github.com/etudiant-codeworlds/mon-premier-projet-html-css</div>Définition et utilisation
#La propriété overflow-wrap est un filet de sécurité pour les longues chaînes de caractères. Contrairement à word-break: break-all, elle ne touche pas aux mots ordinaires. Elle ne coupe un mot que lorsqu’il est impossible de le faire tenir en entier sur la ligne.
break-word et anywhere fonctionnent de façon similaire, mais anywhere intervient aussi dans le calcul de la largeur minimale de l’élément. En pratique, anywhere protège mieux contre l’élargissement des colonnes dans les mises en page flex et grid.
Cette propriété s’appelait autrefois word-wrap, et ce nom fonctionne toujours comme alias.
Syntaxe
#overflow-wrap: normal | break-word | anywhere;Valeurs
#- Le mot long dépasse du cadre.
- Le mot long se coupe, les mots ordinaires restent intacts.
- Comme break-word, mais pris en compte aussi dans la largeur minimale.
Valeurs en pratique
#normal
.demo { overflow-wrap: normal; }break-word
.demo { overflow-wrap: break-word; }anywhere
.demo { overflow-wrap: anywhere; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ajoutez
overflow-wrap: anywhereaux commentaires et au contenu des utilisateurs. Un lien long ne fera plus éclater la mise en page. - Dans les conteneurs flex, combinez-la avec
min-width: 0sur l’élément contenant le texte.
Entrées associées
#- word-breakPermet de couper les mots n’importe où lorsqu’ils ne tiennent pas sur la ligne.
- white-spaceDétermine comment traiter les espaces, les retours à la ligne et le retour automatique dans le texte.
- text-overflowDétermine comment marquer un texte coupé à la fin d’une ligne, par exemple avec des points de suspension.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.