word-break, word-wrap et overflow-wrap
Résumé des caractéristiques de la propriété word-break
normal
| break-all
| keep-all
| manual
| auto-phrase
| break-word
normal
word-break
passe d'une valeur à l'autre sans transition.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:
;
- 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:
;
- 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.
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
.
(la peur des vendredis 13).
(la peur des vendredis 13).
Prise en charge par les navigateurs (compatibilité).
Le tableau suivant illustre la compatibilité des navigateurs actuels avec chacune de ces propriétés.
word-break
word-wrap
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.