La propriété word-break est utilisée pour définir la façon dont la césure s'applique pour les passages à la ligne.

Note : Contrairement à overflow-wrap, word-break introduira une césure à l'endroit exact où le texte dépasserait du conteneur.

Syntaxe

/* Avec un mot-clé */
word-break: normal; 
word-break: break-all; 
word-break: break-word;
word-break: keep-all;

/* Valeurs globales */
word-break: inherit;
word-break: initial;
word-break: unset;

La propriété word-break est définie avec un mot-clé parmi ceux décrits ci-après.

Valeurs

normal
Le passage à la ligne classique est utilisé.
break-all
La césure peut être insérée après n'importe quel caractère (ne s'applique pas pour les textes en chinois, japonais et coréen).
break-word
Afin d'éviter le dépassement, les mots qui ne sont normalement pas scindés peuvent être scindés à des endroits arbitraires s'il n'y a pas d'autres points possibles pour une rupture.
keep-all
La césure est interdite pour les textes en chinois, japonais et coréen. Pour les autres types de texte, le comportement est le même que normal.

Syntaxe formelle

normal | break-all | keep-all | break-word

Exemple

HTML

<p class="normal étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> 
<p class="breakAll étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> 
<p class="breakWord étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
<p class="keep étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

CSS

.étroit {
  padding: 5px;
  border: 1px solid;
  width: 8em;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Text Module Level 3
La définition de 'word-break' dans cette spécification.
Version de travail Définition initiale
Valeur initialenormal
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple11215

5.51

8 -ms- 2

15 Oui
keep-all44 Non155.5319
break-word Oui Non Non Non Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui18 Oui15 Non ? Oui
keep-all Oui Oui Non15 Non9 Oui
break-word Oui Oui Non Non Oui Oui Oui

1. No version of Internet Explorer supports the initial value.

2. Don't use -ms-word-break, which is a synonym for word-break.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, PifyZ, teoli, fscholz, Sebastianz, louuis, FredB
 Dernière mise à jour par : SphinxKnight,