Propriété CSS `word-break`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Voir la compatibilité complète
En savoir plus

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

Exemple interactif

word-break: normal;

word-break: break-all;

word-break: keep-all;

word-break: break-word;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Honorificabilitudinitatibus califragilisticexpialidocious
    Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
  </div>
</section>

#example-element {
  width: 80%;
  padding: 20px;
  text-align: start;
  border: solid 1px darkgray;
}

Syntaxe

css

/* Avec un mot-clé */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* expérimental */
word-break: break-word; /* obsolète */

/* Valeurs globales */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
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).
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.
auto-phrase: A le même effet que word-break: normal, sauf qu'une analyse spécifique à la langue est effectuée pour améliorer les césures en évitant de les placer au milieu des phrases naturelles.
break-word: A le même effet que word-break: normal et que overflow-wrap: anywhere quelle que soit la valeur de la propriété overflow-wrap.

Note : Contrairement à word-break: break-word et à overflow-wrap: break-word (cf. overflow-wrap), word-break: break-all crée une césure à l'endroit exact où le mot a dépassé du conteneur (même si placer le mot entier sur sa propre ligne a pu éviter la césure).

La spécification répertorie également une valeur supplémentaire, manual, qui n'est actuellement prise en charge par aucun navigateur. Lorsqu'elle est implémentée, manual a le même effet que word-break: normal, sauf que les césures ne sont pas automatiquement insérées dans les langues d'Asie du Sud-Est. C'est nécessaire car, dans ces langues, les agents utilisateurs placent fréquemment des césures à des positions sous-optimales. manual permet d'insérer manuellement des césures aux positions optimales.

Définition formelle

Valeur initiale	`normal`
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

word-break = 
  normal       |
  break-all    |
  keep-all     |
  manual       |
  auto-phrase  |
  break-word

Exemples

HTML

html

<p>1. <code>word-break: normal</code></p>
<p class="normal etroit">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll etroit">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll etroit">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: manual</code></p>
<p class="manual etroit">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase etroit">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>6. <code>word-break: break-word</code></p>
<p class="breakWord etroit">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

CSS

css

.etroit {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

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

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

.manual {
  word-break: manual;
}

.autoPhrase {
  word-break: auto-phrase;
}

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