Word-break - Propriété CSS

word-break

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.
Utilisable sur
HTML
Valeurs prédéfinies
normal | break-all | keep-all | auto-phrase | break-word | manual
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: CR (document candidat à la recommandation)

Schéma de la syntaxe de word-break.

word-break - Syntax DiagramSyntax diagram of the word-break CSS property. See stylescss.free.fr for details. normal normal break-all break-all keep-all keep-all manual manual auto-phrase auto-phrase break-word break-wordword-break:;word-break:;
Schéma syntaxique de la propriété word-break.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété word-break.

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.

Cette propriété peut provoquer la coupure des mots mais n'insère 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 pour les langues autres que CJK.

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.
word-break:break-all;
hyphens coupe en respectant les règles de césure et insère un tiret à l'endroit des césures.
hyphens:auto;

Valeurs pour word-break.

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

  • 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 des langues comme le Lao, ou par le bas pour les langues chinoises.

    您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。
    คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
  • word-break: break-all;

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

    您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。
    คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
  • 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é.

    您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。
    คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
  • word-break: keep-all;

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

    您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。
    คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
  • word-break: manual; ⚠

    Les mots sont coupés en accord avec les règles habituelles. Très ressemblant à normal.

    您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。
    คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
  • 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.

    您知道什么是 paraskevidékatriaphobie 吗？这是一种对13号星期五的恐惧。
    คุณรู้จัก paraskevidékatriaphobia หรือไม่? นั่นคือความกลัวของวันศุกร์ที่ 13
  • word-break: initial; (normal) word-break: inherit; word-break: revert; word-break: revertLayer; word-break: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de word-break.

L'exemple ci-dessous montre l'Exemple d'animation de 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

Exemple interactif avec la propriété word-break.

Ce simulateur illustre tous les cas de figure sur un texte écrit en japonais.

word-break :
このテキストは日本語で書かれています。この特性はラテン語系の言語では無意味です。

Compatibilité des navigateurs avec word-break.

Le tableau suivant illustre la compatibilité des navigateurs actuels avec cette propriété.

Colonne 1
Support de la propriété word-break utilisable sur les langages CJK et autres.
Colonne 2
Support de la valeur auto-phrase pour la propriété word-break. Cette valeur n'est prise en compte que pour les langues japonaises.
1
Propriété
word-break
2
Valeur
auto-phrase
Estimation de la prise en charge globale.
97%
73%

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

Samsung Internet

Safari

Safari sur IOS

Opéra

Chrome

Edge

KaiOS Browser

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

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

Histoire de la propriété word-break.

  • Module CSS - Texte - Niveau 3

    Introduction de la propriété word-break avec les valeurs normal, keep-all, break-all et break-word.
    WD
    27 Janvier 1999
    Document de travail.
    CR
    22 Décembre 2020
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Texte - Niveau 4

    Ajout des valeurs manual et auto-phrase pour la propriété word-break.
    WD
    22 Septembre 2015
    Document de travail.
    CR
    PR
    REC

A propos de la gestion des textes, voir aussi.

Le propriété word-break est décrite 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 :

⚠
hanging-punctuation
Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
hyphenate-character
Définit le caractère qui sera à utiliser comme marque de césure.
⚠
hyphenate-limit-chars
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
⚠
hyphenate-limit-last
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
⚠
hyphenate-limit-lines
Définit le nombre maximal de lignes successives se terminant une césure
⚠
hyphenate-limit-zone
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
hyphens
Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.
letter-spacing
Espacement des lettres.
line-break
Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).
⚠
line-padding
Ajoute un espace au début et à la fin des lignes.
overflow-wrap
Gestion des coupures de mots pour les langues CJK et quelques autres.
tab-size
Définit la taille des caractères de tabulation.
text-align
Spécifie comment doit être aligné le texte de l'élément.
⚠
text-align-all
Définit l'alignement des lignes d'un texte (synonyme de text-align).
text-align-last
Définit l'alignement de la dernière ligne des paragraphes.
⚠
text-autospace
Définit l'espace entre les caractères adjacents (utilisable pour les langues CJK).
⚠
text-group-align
text-indent
Définit le retrait de la première ligne des paragraphe (indentation).
⚠
text-justify
Sélectionne la méthode utilisée pour justifier le texte.
✗
text-space-collapse
Définit comment gérer les espaces et les espaces multiples dans le texte.
✗
text-space-trim
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
⚠
text-spacing
⚠
text-spacing-trim
Definit l'espacement autour des caractères de ponctuation CJK.
text-transform
Casse du texte (minuscules, majuscules...).
⚠
text-wrap
Définit la gestion des retours à la ligne du texte.
text-wrap-mode
Définit si les retours à la ligne sont autorisés.
text-wrap-style
Définit comment les saut de ligne vont se faire.
white-space
Définit comment sont restitués les espaces multiples et les retours chariot.
white-space-collapse
Définit comment les espaces successifs et les retours à la ligne doivent être traités.
⚠
white-space-trim
Définit si comment le navigateur doit supprimer les espaces réductibles.
⚠
word-boundary-detection
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
✗
word-boundary-expansion
Substitue certains caractères de séparation de mots par d'autres.
⚠
word-space-transform
Normalise les caractères d'espacement (écritures CJK).
word-spacing
Permet d'ajuster l'espacement des mots.
word-wrap
Coupure des mots pour les langues CJK et quelques autres.
⚠
wrap-after
Autorise ou non les sauts de lignes après la boite.
⚠
wrap-before
Autorise ou non les sauts de lignes avant la boite.
⚠
wrap-inside
Autorise ou non les sauts de lignes dans la boite.