page-break-after

Probieren Sie es aus

page-break-after: auto;

page-break-after: always;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'page-break-after'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Syntax

/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: revert-layer;
page-break-after: unset;

Diese Eigenschaft gilt für Blockelemente, die eine Box erzeugen. Sie gilt nicht für ein leeres <div>, das keine Box erzeugen wird.

Werte

auto

Anfangswert. Automatische Seitenumbrüche (weder erzwungen noch verboten).

always

Erzwingt immer Seitenumbrüche nach dem Element.

avoid

Vermeidet Seitenumbrüche nach dem Element.

left

Erzwingt Seitenumbrüche nach dem Element, sodass die nächste Seite als linke Seite formatiert wird. Dies ist die Seite, die auf der linken Seite des Buchrückens oder auf der Rückseite der Seite beim Duplexdruck angeordnet ist.

right

Erzwingt Seitenumbrüche nach dem Element, sodass die nächste Seite als rechte Seite formatiert wird. Dies ist die Seite, die auf der rechten Seite des Buchrückens oder auf der Vorderseite der Seite beim Duplexdruck angeordnet ist.

recto

Wenn die Seiten von links nach rechts verlaufen, wirkt dies wie right. Wenn die Seiten von rechts nach links verlaufen, wirkt dies wie left.

verso

Wenn die Seiten von links nach rechts verlaufen, wirkt dies wie left. Wenn die Seiten von rechts nach links verlaufen, wirkt dies wie right.

Seitenumbruch-Aliase

Die page-break-after Eigenschaft ist jetzt eine veraltete Eigenschaft, die durch break-after ersetzt wurde.

Aus Kompatibilitätsgründen sollte page-break-after von Browsern als Alias von break-after behandelt werden. Dies stellt sicher, dass Websites, die page-break-after verwenden, weiterhin wie vorgesehen funktionieren. Ein Teil der Werte sollte wie folgt als Aliase behandelt werden:

Formale Definition

Formale Syntax

page-break-after = 
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit  

Beispiele

Einen Seitenumbruch nach Fußnoten setzen

/* move to a new page after footnotes */
div.footnotes {
  page-break-after: always;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• break-before, break-after, break-inside
• page-break-before, page-break-inside
• orphans, widows