Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

word-break, word-wrap et overflow-wrap

Description.

Ces trois propriétés définissent si les mots peuvent être coupés lorsque leur longueur dépasse la largeur de leur élément. On parle bien de coupure de mots et non pas de coupure de ligne. Ce cas de figure ne se présente que pour des mots très longs ou des largeurs d'éléments très petites.

La différence entre les deux premières propriétés ne saute pas aux yeux et semble être surtout importante pour les langues CJK (Chinois, Japonais, K pour coréen).

La propriété overflow-wrap a un effet similaire à word-break. Espérons qu'une clarification de ces trois propriétés soit bientôt publiée.

Voir aussi la propriété CSS hyphens, qui détermine la règle de césure pour couper les mots.

Syntaxes pour word-break.

  • word-break: normal;

    Valeur par défaut. Les mots ne sont pas coupés, même si leur longueur est plus grande que celle de la ligne. Les mots peuvent donc déborder de l'élément par la droite.

  • word-break: break-all;

    Tous les mots peuvent être coupés à n'importe quel endroit, afin d'optimiser le remplissage des lignes.

  • word-break: break-word;

    Les mots plus longs que la longueur de la ligne peuvent être coupés mais en favorisant les retours à la ligne entre les mots. Autrement dit, les mots plus courts que la ligne sont rejetés à la ligne suivante.

  • word-break: keep-all;

    Les mots plus longs que la longueur de la ligne ne sont pas coupés. On accepte donc un débordement du container.

  • word-break: initial;

    La valeur initiale est normal.

  • word-break: unset; word-break: inherit;

    Reportez-vous à la description générale de ces valeurs.

Syntaxes pour word-wrap.

  • word-break: normal;

    Valeur par défaut. Les mots ne sont pas coupés, même si leur longueur est plus grande que celle de la ligne. Ces mots "longs" débordent de l'élément.

  • word-break: break-word;

    Les mots plus longs que la longueur de la ligne peuvent être coupés. Les mots plus courts que la ligne sont rejetés à la ligne suivante.

  • word-break: initial;

    La valeur initiale est normal.

  • word-break: unset; word-break: inherit;

    Reportez-vous à la description générale de ces valeurs.

Valeurs pour overflow-wrap.

  • word-break: normal;

    Valeur par défaut. Les mots ne sont pas coupés, même si leur longueur est plus grande que celle de la ligne : ils débordent de l'élément.

  • word-break: break-word;

    Les mots plus longs que la longueur de la ligne peuvent être coupés mais on tentera cependant de favoriser les retours entre les mots : les mots plus courts que la ligne sont rejetés à la ligne suivante.

  • word-break: anywhere;

    Les mots plus longs que la longueur de la ligne sont coupés de façon à optimiser le remplissage des lignes.

  • word-break: initial;

    La valeur initiale est normal.

  • word-break: unset; word-break: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

word-break :
word-wrap :
overflow-wrap :
Le mot anticonstitutionnellement est, parait-il, le mot le plus long de la langue française

Voir aussi...

Césure et coupure des mots - Propriétés.