Propriété CSS break-before

La propriété break-before est une propriété CSS qui définit comment n'importe quelle brèche (page, colonne) doit se manifester avant la boîte générée. Si la boîte générée est manqué, la propriété est ignorée. Elle a quatre valeurs: auto, avoid, always, all.

Cette propriété est obsolète.
Valeur initiale auto
Appliquée à Éléments au niveau bloc.
Héritée Non.
Animable Distincte.
Version CSS3
Syntaxe DOM object.style.breakBefore = "auto";

Syntaxe

break-before: auto | avoid | always | all | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .multicol {
      background-color: #eee;
      padding: 10px;
      /* Safari and Chrome */
      -webkit-column-count: 3;
      -webkit-column-rule: 2px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3; 
      -moz-column-rule: 2px dotted #ccc;
      /* CSS3 */
      column-count: 3; 
      column-rule: 2px dotted #ccc;
      }
      .multicol hr {
      break-before: column;
      }
    </style>
  </head>
  <body>
    <h2> Exemple de break-before</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique. </p>
      <hr>
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
    </div>
  </body>
</html>

Valeurs

Valeur Description
auto Permet d'installer n'importe quelle zone (page, colonne) avant la boîte principale.
avoid Évite d'insérer une brèche avant la boîte principale.
always Fait insérer une brèche avant la boîte principale.
all Fait insérer une brèche avant la boîte principale.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

50.0+ 12.0+ 65.0+ 37.0+


Trouvez-vous cela utile?

Articles Associées