Propriété CSS overflow-wrap

❮ Précédent Suivant ❯

La propriété overflow-wrap est utilisée pour spécifier si le navigateur peut rompre les lignes dans une chaîne incassable, empêchant ainsi le contenu de déborder.

La propriété overflow-wrap a trois valeurs: normal, anywhere et break-word.

Le nom overflow-wrap est le nom standard pour la prpriété word-wrap.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p {
      width: 200px;
      margin: 3px;
      background: #ccc;
      }
      .anywhere { 
      overflow-wrap: anywhere; 
      }
      .break-word {
      overflow-wrap: break-word;
      }
      .normal {
      overflow-wrap: normal;
      }
      .auto {
      overflow-wrap: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-wrap</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Le Lorem Ipsum est le faux texte 
      standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> de l'imprimerie depuis les années 1500...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Le Lorem Ipsum est le faux texte
      standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> de l'imprimerie depuis les années 1500......
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Le Lorem Ipsum est le faux texte 
      standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> de l'imprimerie depuis les années 1500.........
    </p>
    <h3>Overflow-wrap: auto</h3>
    <p>Le Lorem Ipsum est le faux texte 
      standard <em class="auto">dummydummydummydummydummydummydummydummy</em> 
      de l'imprimerie depuis les années 1500...
    </p>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
normal	Les lignes ne cassent que selon les règles normales. Les mots ne se briseront pas même en cas de débordement du conteneur. C'est la valeur initiale de cette propriété.
anywhere	Les mots longs ou les URL seront interrompus à tout moment s'il n'y a pas de points de rupture acceptables dans la ligne. Le caractère de césure ne sera pas cassé même si la propriété hyphens est utilisée.
break-word	Les mots longs ou les chaînes de caractères qui ne rentrent pas dans leur conteneur se briseront à un endroit arbitraire pour forcer un saut de ligne, mais les possibilités de retour à la ligne souple introduites par le saut de mot ne sont pas prises en compte lors du calcul des tailles intrinsèques min-content.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.