page-break-after

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Warnung: Diese Eigenschaft wurde durch die break-after Eigenschaft ersetzt.

Die page-break-after CSS Eigenschaft passt den Seitenumbruch nach dem aktuellen Element an.

Probieren Sie es aus

page-break-after: auto;

page-break-after: always;

<section id="default-example">
  <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>
</section>

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

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

.hide-element {
  display: none;
}

const btn = document.getElementById("print-btn");
const editorContainer = document.getElementsByClassName(
  "css-editor-container",
)[0];
const exampleHTMLElement = document.getElementById("default-example");

const printableSection = document.createElement("div");
printableSection.setAttribute("id", "printable-section");
printableSection.classList.add("hide-element");
document.body.appendChild(printableSection);

btn.addEventListener("click", () => {
  const exampleContent = exampleHTMLElement.innerHTML;

  editorContainer.classList.add("hide-element");
  printableSection.innerHTML = exampleContent;
  printableSection.classList.remove("hide-element");

  window.print();

  printableSection.classList.add("hide-element");
  printableSection.innerHTML = "";
  editorContainer.classList.remove("hide-element");
});

Syntax

css
/* 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 Block-Elemente, die eine Box erzeugen. Sie gilt nicht für ein leeres <div>, das keine Box erzeugt.

Werte

auto

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

always

Erzwingt immer einen Seitenumbruch 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 im Duplexdruck platziert wird.

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 im Duplexdruck platziert wird.

recto

Wenn die Seiten von links nach rechts fortschreiten, wirkt es wie right. Wenn die Seiten von rechts nach links fortschreiten, wirkt es wie left.

verso

Wenn die Seiten von links nach rechts fortschreiten, wirkt es wie left. Wenn die Seiten von rechts nach links fortschreiten, wirkt es 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 beabsichtigt funktionieren. Ein Teil der Werte sollte wie folgt als Aliase behandelt werden:

page-break-after break-after
auto auto
left left
right right
avoid avoid
always page

Formale Definition

Anfangswertauto
Anwendbar aufBlocklevelelemente in normalem Fluss des Wurzelelements. User Agents können es auch auf andere Elemente wie table-row-Elemente anwenden.
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Einen Seitenumbruch nach Fußnoten setzen

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

Spezifikationen

Specification
CSS Logical Properties and Values Level 1
# page
CSS Paged Media Module Level 3
# page-break-after
CSS Fragmentation Module Level 3
# page-break-properties

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch