Propriété CSS word-break

La propriété word-break spécifie où les lignes doivent être brisées.

Normalement, les sauts de ligne ne se produisent que dans certains espaces lorsqu'il existe un espace ou un trait d'union. Mais lorsque la propriété word-break est définie à break-all, le navigateur va briser les lignes à tout moment.

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

Syntaxe

word-break: normal | break-all | keep-all | break-word | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html, body {
      height: 100%;
      }
      body {
      font-family: Helvetica, san serif;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #8ebf42;
      }
      p{
      word-break: break-all;
      line-height: 1;
      text-transform: uppercase;
      text-align: center;
      font-size:30px;
      font-weight: bold;
      color: #eee;
      width: 1em;
      }
    </style>
  </head>
  <body>
    <p>élément</p>
  </body>
</html>

Un exemple, dans lequel les mots brisent dans le texte:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      font-size: 0.95em;
      line-height: 1.5;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .container {
      margin: 50px auto;
      max-width: 700px;
      }
      .text {
      padding: 20px;
      background-color: #666;
      color: white;
      text-align: justify;
      }
      .break {
      word-break: break-all;
      }
      strong {
      background-color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété word-break</h2>
    <div class="container">
      <h3>Texte brise dans les mots</h3>
      <p class="text break">
        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
      </p>
    </div>
  </body>
</html>

Valeurs

Valeur Description
normal Utilise les règles de saut de ligne. C'est la valeur initiale de cette propriété.
break-all Mot est cassé à n'importe quel caractère pour éviter de déborder.
keep-all Les sauts de mots ne doivent pas être utilisés pour le texte chinois / japonais / coréen (CJK). Le comportement du texte non-CJK est identique à celui de la normale.
break-word Word est cassé à n'importe quel moment arbitraire pour éviter de déborder.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

44.0+ 15.0+ 9.0+ 31.0+


Trouvez-vous cela utile?

Articles Associées