word-break
Baseline
Widely available
*
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.
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.
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
/* Avec un mot-clé */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* dépréciée */
/* 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).
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. break-wordObsolète-
Aura le même effet que
word-break: normalet queoverflow-wrap: anywherequelle 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éera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
word-break =
normal |
break-all |
keep-all |
manual |
auto-phrase |
break-word
Exemples
HTML
<p>1. <code>word-break: normal</code></p>
<p class="normal étroit">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll étroit">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll étroit">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
<p>4. <code>word-break: break-word</code></p>
<p class="breakWord étroit">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
CSS
.étroit {
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;
}
.keep {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 3 # word-break-property |
Compatibilité des navigateurs
Chargement…