Propriété CSS overflow-wrap

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>

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.

Support de Navigateurs

23.0+ 18.0+ 49.0+ 6.1+ 12.1+


Trouvez-vous cela utile?

Articles Associées