Propriété CSS overflow-wrap

La propriété overflow-wrap permet de spécifier si le navigateur peut insérer des sauts de ligne au sein d'une chaîne de caractères non cassable, empêchant ainsi le débordement du contenu.

La propriété overflow-wrap possède trois valeurs principales : normal, break-word et anywhere. Elle prend également en charge les mots-clés CSS universels initial et inherit.

INFO

Le nom overflow-wrap est considéré comme le nom standard de la propriété word-wrap.

Overflow-wrap vs Word-break

Bien que overflow-wrap et word-break se comportent de manière similaire, il existe des différences entre eux. La propriété overflow-wrap casse un mot s'il ne peut pas être placé sur la ligne sans provoquer de débordement, quelle que soit la langue utilisée. La propriété word-break est principalement utilisée pour les langues CJK (chinois, japonais et coréen) pour spécifier où les sauts de ligne peuvent se produire entre les caractères, mais elle fournit également des règles de cassage strictes pour le texte non-CJK.

Les propriétés word-wrap et overflow-wrap

La propriété word-wrap accepte les mêmes valeurs que overflow-wrap. Ces propriétés se comportent de manière similaire.

Valeur initiale	normal
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.overflowWrap = "normal";

Syntaxe

Syntaxe CSS overflow-wrap

css

overflow-wrap: normal | anywhere | break-word | initial | inherit;

Exemple de la propriété overflow-wrap :

Exemple de code CSS overflow-wrap

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 200px;
        margin: 3px;
        background: #ccc;
      }
      .anywhere {
        overflow-wrap: anywhere;
      }
      .break-word {
        overflow-wrap: break-word;
      }
      .normal {
        overflow-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-wrap property example</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
normal	Les lignes ne se casseront que selon les règles normales de cassage de ligne. Les mots ne se casseront pas même s'ils dépassent du conteneur. Il s'agit de la valeur par défaut de cette propriété.
anywhere	Les mots longs ou les URL se casseront à n'importe quel endroit s'il n'y a pas d'autres points de cassage acceptables sur la ligne. Les caractères de césure ne sont pas considérés comme des points de cassage acceptables, même si la propriété `hyphens` est définie.
break-word	Les mots longs ou les chaînes qui ne tiennent pas dans leur conteneur se casseront à un point arbitraire pour forcer un saut de ligne. Les opportunités de cassage souple ne sont pas prises en compte lors du calcul de la taille minimale du contenu de l'élément.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle est la fonction de la propriété CSS 'overflow-wrap' ?

Elle détermine comment le contenu débordant non visible est signalé à l'utilisateurElle spécifie si le navigateur doit insérer des sauts de ligne dans les mots pour empêcher le débordementElle contrôle le comportement de la propriété 'break-inside'Elle définit comment le contenu supplémentaire est géré, dans le sens inverse de l'écritureElle définit où un saut de page ou de colonne doit se produire

Propriété CSS overflow-wrap ​

Overflow-wrap vs Word-break ​

Les propriétés word-wrap et overflow-wrap ​

Syntaxe ​

Exemple de la propriété overflow-wrap : ​

Valeurs ​