CSS-Eigenschaft break-after

Die CSS-Eigenschaft break-after definiert, wie sich ein Bruch (Seite, Spalte) nach dem erzeugten Rand verhalten soll. Es hat vier Werte: auto, avoid, always, all.

Innerhalb eines Multicol-Containers, der sich in einem Seitencontainer befand, würde ein Spalten- und Seitenumbruch erzwungen.

Diese Eigenschaft ist veraltet.
Anfangswert auto
Gilt für Block-Eevel-Elemente.
Geerbt Nein
Animierbar diskret
Version CSS3
DOM Syntax object.style.breakAfter = "always";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
  <title>Der Titel des Dokuments</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-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft break-after</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr>
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Es ermöglicht das Einfügen eines beliebigen Bereichs (Seite, Spalte) nach der Hauptbox.
avoid Vermeidet es, einen Bruch hinter der Hauptbox einzufügen.
always Zwingt zum Einfügen eines beliebigen Bruchs.
all Es zwingt, um einen beliebigen Bruch einzufügen.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
50.0+ 12.0+ 37.0+

Übe dein Wissen

Welche sind die möglichen Werte für die CSS-Eigenschaft 'break-after'?
Finden Sie das nützlich?