Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
overflow-wrap
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 octobre 2018.
La propriétéoverflow-wrap s'applique aux éléments en ligne (inline) et est utilisée afin de définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.
Exemple interactif
overflow-wrap: normal;overflow-wrap: anywhere;overflow-wrap: break-word;<section> <div> Most words are short & don't need to break. But <strong >Antidisestablishmentarianism</strong > is long. The width is set to min-content, with a max-width of 11em. </div></section>.example-container { background-color: rgba(255, 0, 200, 0.2); border: 3px solid #663399; padding: 0.75em; width: min-content; max-width: 11em; height: 200px;}Note :À la différence deword-break,overflow-wrap créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.
À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intituléeword-wrap. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée enoverflow-wrap etword-wrap est devenu un alias.
Syntaxe
/* Avec un mot-clé */overflow-wrap: normal;overflow-wrap: break-word;overflow-wrap: anywhere;/* Valeurs globales */overflow-wrap: inherit;overflow-wrap: initial;overflow-wrap: unset;La propriétéoverflow-wrap peut être définie avec l'un des mots-clés suivants.
Valeurs
normalIndique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.
anywhereIndique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles
min-contentintrinsèques.break-wordIndique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césurene sont pas prises en compte lors du calcul des tailles
min-contentintrinsèques.
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
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 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}HTML
<h3><code>normal</code></h3><p> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself.</p><h3><code>overflow-wrap: anywhere</code></h3><p> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself.</p><h3><code>overflow-wrap: break-word</code></h3><p> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself.</p><h3><code>word-break: break-all</code></h3><p> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself.</p><h3><code>hyphens: auto</code>, without <code>lang</code> attribute</h3><p> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em> though I've never been there myself.</p><h3><code>hyphens: auto</code>, English rules</h3><p lang="en"> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself.</p><h3><code>hyphens: auto</code>, German rules</h3><p lang="de"> They say the fishing is excellent at Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself.</p>Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 3 # overflow-wrap-property |