word-break
Permet de couper les mots n’importe où lorsqu’ils ne tiennent pas sur la ligne.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.wordBreak = "break-all"
Exemple
#.token {
word-break: break-all;
font-family: monospace;
}<p class="stage" style="margin: 0; width: 240px;">Votre clé : <code class="token" style="word-break: break-all;">cw_live_4f9a2b7c1e8d3f6a0b5c9e2d7f1a4b8c</code></p>Définition et utilisation
#La propriété word-break détermine où la ligne peut se couper à l’intérieur des mots. Par défaut, dans des langues comme le français, les lignes ne se coupent qu’aux espaces et aux traits d’union, donc une chaîne de caractères très longue peut dépasser du conteneur.
break-all permet de couper un mot entre deux caractères quelconques. C’est efficace pour les longues adresses URL, les identifiants et les chaînes sans espaces, mais cela coupe aussi les mots ordinaires à des endroits inattendus.
Dans la plupart des cas, overflow-wrap: anywhere est préférable : il ne coupe un mot que lorsqu’il ne tient vraiment pas.
Syntaxe
#word-break: normal | break-all | keep-all;Valeurs
#Valeurs en pratique
#normal
.demo { word-break: normal; }break-all
.demo { word-break: break-all; }keep-all
.demo { word-break: keep-all; }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
#- Pour les longues adresses dans du texte,
overflow-wrap: anywheresuffit généralement, car il ne perturbe pas les mots ordinaires. - Les clés, les jetons et les hachages dans le code sont de bons candidats pour
break-all.
Entrées associées
#- overflow-wrapCoupe les mots longs uniquement lorsqu’ils dépasseraient sinon du conteneur.
- 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.