Mot-pause - Astuces CSS | CSS Almanach 2025

La word-breakpropriété en CSS peut être utilisée pour changer quand des sauts de ligne doivent se produire. Normalement, les sauts de ligne dans le texte ne peuvent se produire que dans certains espaces, comme lorsqu'il y a un espace ou un trait d'union.

Dans l'exemple ci-dessous, nous pouvons faire les word-breakentre les lettres à la place:

p ( word-break: break-all; )

Si nous définissons ensuite la largeur du texte à un em, le mot se cassera à chaque lettre:

Voir le texte de réglage du stylet verticalement avec saut de mots par CSS-Tricks (@ css-tricks) sur CodePen.

Cette valeur est souvent utilisée dans les endroits avec du contenu généré par l'utilisateur afin que les longues chaînes ne risquent pas de casser la mise en page. Un exemple très courant est une longue URL à copier-coller. Si cette URL n'a pas de traits d'union, elle peut s'étendre au-delà de la zone parent et paraître mauvaise ou pire, causer des problèmes de mise en page.

Voir les liens de correction de stylet avec saut de mots par CSS-Tricks (@ css-tricks) sur CodePen.

Valeurs

normal: utilisez les règles par défaut pour le saut de mots.
break-all: n'importe quel mot / lettre peut passer à la ligne suivante.
keep-all: pour les textes chinois, japonais et coréen, les mots ne sont pas interrompus. Sinon, c'est la même chose que normal.

Cette propriété est également souvent utilisée en conjonction avec la propriété traits d'union, de sorte qu'en cas de rupture, un hypen est inséré, conformément à la norme dans les livres.

L'utilisation complète, avec les préfixes de fournisseur nécessaires, est:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

L'utilisation de ces propriétés sur le sélecteur universel peut être utile si vous avez un site avec beaucoup de contenu généré par l'utilisateur. Bien que juste un avertissement, cela peut sembler étrange sur les titres et le texte pré-formaté (

En rapport

débordement
traits d'union
espace blanc
Gestion des mots longs et des URL

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.