overflow-wrap
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 octobre 2018.
La propriété CSS overflow-wrap s'applique au texte, définissant si le navigateur doit insérer des sauts de ligne à l'intérieur d'une chaîne autrement insécable pour éviter que le texte ne dépasse de sa boîte de ligne.
Note :
La propriété était à l'origine une extension non standard et non préfixée de Microsoft appelée word-wrap, et a été implémentée par la plupart des navigateurs sous le même nom. Elle a depuis été renommée en overflow-wrap, word-wrap étant devenu un alias.
Exemple interactif
overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;
<section class="default-example" id="default-example">
<div class="example-container">
La plupart des mots courts & n'ont pas besoin d'être coupés. Mais
<strong class="transition-all" id="example-element"
>Antidisestablishmentarianism</strong
>
est long. La largeur est définie sur min-content, avec une largeur maximale
de 11em.
</div>
</section>
.example-container {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
padding: 0.75em;
width: min-content;
max-width: 11em;
height: 200px;
}
Note :
Contrairement à word-break, overflow-wrap ne créera une rupture que si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.
Syntaxe
/* Valeurs avec un mot-clé */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
/* Valeurs globales */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;
La propriété overflow-wrap peut être définie avec l'un des mots-clés suivants.
Valeurs
normal-
Les lignes ne peuvent se casser qu'aux points de rupture de mots normaux (comme un espace entre deux mots).
anywhere-
Pour éviter le dépassement, une chaîne de caractères autrement insécable — comme un long mot ou une URL — peut être coupée à n'importe quel point s'il n'y a pas d'autres points de rupture acceptables sur la ligne. Aucun caractère de césure n'est inséré au point de rupture. Les opportunités de retour à la ligne introduites par la césure sont prises en compte lors du calcul des tailles intrinsèques
min-content. break-word-
Identique à la valeur
anywhere, les mots normalement insécables peuvent être coupés à des points arbitraires s'il n'y a pas d'autres points de rupture acceptables sur la ligne, mais les opportunités de retour à la ligne introduites par la césure ne sont pas prises en compte lors du calcul des tailles intrinsèquesmin-content.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | éléments textes |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
overflow-wrap =
normal |
break-word |
anywhere
Exemples
Comparer overflow-wrap, word-break et hyphens
Cet exemple compare les résultats de overflow-wrap, word-break et hyphens lors de la coupure d'un mot long.
HTML
<p>
Ils disent que la pêche est excellente au lac
<em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, mais je
n'y suis jamais allé moi-même. (<code>normal</code>)
</p>
<p>
Ils disent que la pêche est excellente au lac
<em class="ow-anywhere"> Chargoggagoggmanchauggagoggchaubunagungamaugg </em>,
mais je n'y suis jamais allé moi-même. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
Ils disent que la pêche est excellente au lac
<em class="ow-break-word"> Chargoggagoggmanchauggagoggchaubunagungamaugg </em
>, mais je n'y suis jamais allé moi-même. (<code
>overflow-wrap: break-word</code
>)
</p>
<p>
Ils disent que la pêche est excellente au lac
<em class="word-break"> Chargoggagoggmanchauggagoggchaubunagungamaugg </em>,
mais je n'y suis jamais allé moi-même. (<code>word-break</code>)
</p>
<p>
Ils disent que la pêche est excellente au lac
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, mais
je n'y suis jamais allé moi-même. (<code>hyphens</code>, sans attribut
<code>lang</code>)
</p>
<p lang="en">
Ils disent que la pêche est excellente au lac
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, mais
je n'y suis jamais allé moi-même. (<code>hyphens</code>, règles anglaises)
</p>
<p class="hyphens" lang="de">
Ils disent que la pêche est excellente au lac
<em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, mais
je n'y suis jamais allé moi-même. (<code>hyphens</code>, règles allemandes)
</p>
CSS
p {
width: 13em;
margin: 2px;
background: gold;
}
.ow-anywhere {
overflow-wrap: anywhere;
}
.ow-break-word {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
.hyphens {
hyphens: auto;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Text Module Level 3 # overflow-wrap-property |
Compatibilité des navigateurs
Voir aussi
- La propriété
word-break - La propriété
white-space - La propriété
hyphens - La propriété
text-overflow - Guide de retour à la ligne et de coupure de texte