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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.