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

word-break
word-wrap
overflow-wrap

Résumé des caractéristiques de la propriété word-break

Description rapide
Coupure des mots longs.
Statut
Standard
S'applique à
Éléments contenant du texte.
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
normal | break-all | keep-all | manual | auto-phrase | break-word
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété word-break passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Description.

La propriété word-break autorise ou non la coupure des mots qui débordent de la ligne. Par défaut ces mots sont rejetés à la ligne suivante mais word-break peut demander à ce qu'ils soient coupés en bout de ligne, la suite du mot se retrouvant sur la ligne suivante.

Les deux propriétés overflow-wrap et word-wrap sont identiques. Elles définissent s'il faut couper les mots dont la longueur est supérieure à celle de la ligne. Ce cas de figure ne se présente que pour des mots très longs ou des longueurs de ligne très petites.

Ces trois propriétés peuvent provoquer la coupure des mots mais n'insèrent pas de tiret de césure, et d'autre part, la coupure se fait sans considérer les règles de césure habituelles : en français, on coupe entre les syllabes, ou entre les consonnes doubles. Reportez-vous à la propriété hyphens qui permet de gérer la césure de façon plus élégante.

Les deux exemples ci-dessous montrent la différence de rendu entre des coupures de mots avec word-break, et des vraies césures avec hyphens. Vous pouvez ajuster la largeur de ces blocs pour provoquer des césures.

word-break coupe les mots mais ne se soucie pas de l'endroit de la coupure, et n'insère pas de tiret.
hyphens coupe en respectant les règles de césure et insère un tiret à l'endroit des césures.

Remarque : word-break offre des possibilités de coupure intéressantes pour les langues CJK.

Syntaxes pour word-break.

word-break:
 normal normal break-all break-all keep-all keep-all manual manual auto-phrase auto-phrase break-word break-word
;
  • word-break: normal;

    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, pour les langues latines, ou par la gauche pour les langues arabes.

  • 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;

    Lorsqu'un mot déborde la fin de la ligne, le navigateur doit d'abord tenter d'insérer un retour à la ligne avant ce mot. Si le mot seul est plus long que la ligne, alors il peut être coupé.

  • word-break: keep-all;

    Aucun mot n'est coupé. On accepte donc un débordement du container. Cette valeur est similaire à normal.

  • word-break: manual;

    En attente de précisions.

  • word-break: auto-phrase;

    Cette valeur demande au navigateur d'effectuer une analyse du texte pour ne pas couper les ensembles de mots qui forment habituellement un groupe dans la langue du texte. Si le navigateur ne sait pas faire cette analyse linguistique dans la langue voulue, cette valeur est équivalente à normal.

  • word-break: initial; word-break: inherit; word-break: revert; word-break: revert-layer; word-break: unset;

    La valeur initiale est : normal.

Syntaxes pour word-wrap.

[overflow-wrap} est un synonyme de word-wrap.

word-wrap:
 normal normal break-word break-word anywhere anywhere
;
  • word-break: normal;

    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: anywhere;

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

  • word-wrap: initial; word-wrap: inherit; word-wrap: revert; word-wrap: revert-layer; word-wrap: unset;

    La valeur initiale est : normal.

Animation de la propriété word-break.

L'exemple ci-dessous montre l'animation de la propriété word-break. Peu d'intérêt esthétique dans cette possibilité.
La largeur de l'élément est ajustable.

Les mots de ce texte seront coupés et non coupés au fur et à mesure du déroulement de l'animation

Simulateur.

Ce simulateur illustre tous les cas de figure. Sur la première série de trois blocs, la largeur est suffisante pour que tous les mots du texte tiennent dans une ligne. Seule la propriété word-break aura un effet sur ces éléments.

Les trois blocs de la deuxième ligne ont une largeur si petite que certains mots ne peuvent pas tenir dans la ligne. Les trois propriétés auront un effet dans ce cas de figure.

Pour que le fonctionnement soit plus clair, ne modifiez qu'une seule propriété à la fois, les deux autres étant sur leur valeur auto.


word-break :

word-wrap :

Le mot anticonstitutionnellement est, parait-il, le mot le plus long de la langue française.
Mais paraskevidékatriaphobie est assez long aussi
(la peur des vendredis 13).
Le nom niederschaeffolsheim est celui d'un village alsacien (assez long aussi).
Le mot anticonstitutionnellement est, parait-il, le mot le plus long de la langue française.
Mais paraskevidékatriaphobie est assez long aussi
(la peur des vendredis 13).
Le nom niederschaeffolsheim est celui d'un village alsacien (assez long aussi).

Prise en charge par les navigateurs (compatibilité).

Le tableau suivant illustre la compatibilité des navigateurs actuels avec chacune de ces propriétés.

1
word-break
2
word-wrap
Estimation de la prise en charge en pourcentage du parc actuel.
95%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que word-break.

Les spécifications CSS éditées par le W3C sont organisées en modules. word-break fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Césure des mots.
Espacement des lettres.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Alignement du texte.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Casse du texte (minuscules, majuscules...).
Définit la gestion des retours à la ligne du texte.
Définit la gestion des espaces multiples et des retours chariot.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Normalise les caractères d'espacement (écritures CJK).
Permet d'ajuster l'espacement des mots.
Coupure des mots.