La propriété word-break est utilisée pour définir la façon dont la césure s'applique pour les endroits où le texte dépasserait de sa boîte de contenu.

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 15IE Support complet 5.5
Notes
Support complet 5.5
Notes
Notes No version of Internet Explorer supports the initial value.
Support complet 8
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Don't use -ms-word-break, which is a synonym for word-break.
Opera Support complet 15Safari Support complet OuiWebView Android Support complet OuiChrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 15Opera Android Aucun support NonSafari iOS ? Samsung Internet Android Support complet Oui
keep-allChrome Support complet 44Edge Support complet OuiFirefox Support complet 15IE Support complet 5.5Opera Support complet 31Safari Support complet 9WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet 15Opera Android Aucun support NonSafari iOS Support complet 9Samsung Internet Android Support complet Oui
break-wordChrome Support complet OuiEdge Support complet OuiFirefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

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,