Word-wrap - Propriété CSS

Schéma syntaxique de word-wrap.

overflow-wrap est un synonyme de word-wrap.

Description de la propriété word-wrap.

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 deux 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.

La propriété word-wrap est utile pour les langues CJK. Elle n'est pas utilisé dans les langues latines ou arabes.

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.

Voyez aussi la propriété word-break.

Valeurs pour word-wrap.

Dans les syntaxes qui suivent, on donne un exemple en Chinois et en Lao. Deux langues pour lesquelles cette propriété est intéressantes. Pour les langues européennes, sauf cas très particuliers, elle n'est pas intéressante.
Le texte est "Connaissez-vous la paraskevidékatriaphobie ? C'est la peur des vendredis 13."

• overflow-wrap: 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.

  您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。

  คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
• overflow-wrap: anywhere;

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

  您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。

  คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
• overflow-wrap: break-word;

  Le fonctionnement est le même que pour la valeur anywhere mais n'influence pas le calcul de la largeur de l'élément d'après le contenu.

  您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。

  คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
• word-wrap: initial; (normal) word-wrap: inherit; word-wrap: revert; word-wrap: revertLayer; word-wrap: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété word-wrap.

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

Simulateur avec la propriété word-wrap.

Les deux blocs ci-dessous ont leurs propriétés width et max-width définies avec les valeurs suivantes :
max-width:150px;
width:min-content
En fonction de la valeur affectée à word-wrap observez ce qui se passe.

Prise en charge de word-wrap par les navigateurs.

Le tableau suivant illustre la compatibilité des navigateurs actuels avec la propriétés word-wrap.

1

Propriétés
word-wrap ou
overflow-wrap

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Safari

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété word-wrap.

• Module CSS - Texte - Niveau 3

  Première présentation de la propriété word-wrap synonyme de overflow-wrap pour des raisons de compatibilité.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Pas de modification concernant les deux propriété word-wrap et overflow-wrap.
  

  22 Septembre 2015

  Document de travail.

  

  

  

A propos de la gestion des textes, voir aussi.

La propriétés word-wrap (et overflow-wrap) sont décrites dans la spécification CSS Text Module, de même que tout ce qui concerne la gestion des textes (alignement, espacements, césure, débordement, etc...). Les propriétés suivantes figurent également dans ce même module de spécification :

Propriétés :