word-break

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.

Valeur initialenormal
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

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

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

Exemple

HTML

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

Résultat

Spécifications

Spécification Statut Commentaires
CSS Text Level 3
La définition de 'word-break' dans cette spécification.
Version de travail Définition initiale

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 15.0 (15.0) 5.5[1] 15 (Oui)
keep-all 44 15.0 (15.0) 5.5 31 9
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 18.0 15.0 (15.0) ? Pas de support ?
keep-all Pas de support[2] Pas de support[2] 15.0 (15.0) ? Pas de support Pas de support[2]

[1] IE8 a introduit -ms-word-break comme synonyme word-break. Il ne faut pas utiliser le préfixe -ms-.

[2] Voir WebKit bug 123782

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,