Propriété CSS word-break

La propriété CSS word-break contrôle la façon dont les mots sont coupés lorsque le texte atteint le bord de son conteneur. Elle détermine si le navigateur est autorisé à diviser un mot entre les caractères afin d'éviter qu'un contenu long et insécable ne déborde.

Par défaut, les sauts de ligne n'ont lieu qu'aux « opportunités de retour à la ligne automatique » — espaces, tirets et points de coupure similaires. Une longue chaîne sans espaces (une URL, un hash, un long identifiant) ne se coupera pas du tout et débordera de sa boîte. Définir word-break: break-all indique au navigateur qu'il peut couper la ligne à n'importe quel caractère, de sorte que le texte soit renvoyé à la ligne au lieu de déborder.

C'est particulièrement utile pour :

Les longues URL, chemins de fichiers ou adresses e-mail dans des colonnes étroites.
Le contenu généré par les utilisateurs, où il est impossible de prédire la longueur des mots.
Le texte mixte CJK (chinois / japonais / coréen) et latin, où le comportement de coupure diffère selon les scripts.

word-break est étroitement lié à overflow-wrap (anciennement word-wrap) et à white-space. La différence essentielle : overflow-wrap: anywhere ne coupe un mot que lorsqu'il déborderait autrement, tandis que word-break: break-all coupe de manière agressive à chaque ligne, même lorsqu'un point de coupure normal était disponible. Privilégiez overflow-wrap en premier pour les cas ordinaires « empêcher cette URL de déborder », et utilisez word-break lorsque vous souhaitez spécifiquement un retour à la ligne au niveau des caractères.

Cette propriété fait partie des propriétés CSS3.

Valeur initiale	normal
S'applique à	Tous les éléments.
Héritée	Oui.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.wordBreak = "break-all";

Syntaxe

Valeurs de CSS word-break

word-break: normal | break-all | keep-all | break-word | initial | inherit;

Exemple de la propriété word-break :

Exemple de code CSS word-break

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        font-family: Helvetica, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #8ebf42;
      }
      p {
        word-break: break-all;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #eee;
        width: 1em;
      }
    </style>
  </head>
  <body>
    <p>element</p>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple ci-dessus, le <p> ne mesure que 1em de large, donc chaque lettre passe à la ligne suivante — une démonstration claire de break-all qui ignore les points de coupure normaux.

Exemple de la propriété word-break avec la valeur "break-all" :

Exemple de code CSS word-break break-all

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        font-size: 0.95em;
        line-height: 1.5;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .container {
        margin: 50px auto;
        max-width: 700px;
      }
      .text {
        padding: 20px;
        background-color: #666;
        color: white;
        text-align: justify;
      }
      .break {
        word-break: break-all;
      }
      strong {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Word-break property example</h2>
    <div class="container">
      <h3>Text breaks inside words</h3>
      <p class="text break">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
      </p>
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
normal	Utilise les règles de saut de ligne. C'est la valeur par défaut de cette propriété.
break-all	Coupe entre deux caractères quelconques, quel que soit le débordement. Cela peut rendre le texte difficile à lire.
keep-all	Les sauts de mots ne doivent pas être utilisés pour le texte chinois/japonais/coréen (CJK). Le comportement pour le texte non CJK est identique à celui de normal.
break-word	Déprécié. Coupe les mots à des points arbitraires s'il n'y a pas de points de coupure acceptables dans la ligne. Utilisez `overflow-wrap: anywhere` à la place.
initial	Donne à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Conseils et pièges courants

break-all nuit à la lisibilité. Parce qu'il peut couper un mot à n'importe quel caractère, la prose ordinaire devient difficile à lire. Ne l'utilisez que lorsque le contenu n'est pas de la prose (codes, hashes, URL) ou lorsque vous souhaitez vraiment que chaque ligne soit remplie jusqu'au bord.
Préférez overflow-wrap pour « ne pas déborder ». Si votre seul objectif est d'empêcher une longue URL de casser la mise en page, overflow-wrap: break-word préserve les mots normaux et ne coupe que le mot problématique.
break-word est déprécié. La valeur break-word de word-break est héritée et se comporte comme overflow-wrap: anywhere plus word-break: normal. Ne l'utilisez pas dans du nouveau code — définissez overflow-wrap: anywhere à la place.
keep-all est destiné au texte CJK. Il empêche les coupures à l'intérieur des mots chinois, japonais et coréens. Le texte latin est traité comme normal, donc il n'a aucun effet visible sur le contenu en anglais.
Combinez avec hyphens pour une prose plus agréable. Lorsque vous souhaitez que les mots longs se coupent à des endroits sensés avec un trait d'union, associez overflow-wrap à hyphens plutôt que de forcer break-all.

Compatibilité des navigateurs

word-break est pris en charge par tous les navigateurs modernes. Les valeurs normal, break-all et keep-all sont largement disponibles ; la valeur héritée break-word est prise en charge pour la compatibilité ascendante, mais doit être évitée.

Exercice

Pratique

Quelle affirmation est correcte concernant la propriété word-break ?

La valeur break-all est utilisée pour le texte chinois/japonais/coréen (CJK).La valeur keep-all coupe chaque mot à n'importe quel caractère pour éviter le débordement.La valeur initial donne à la propriété sa valeur par défaut.