page-break-before

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-before Eigenschaft ersetzt.

Die page-break-before CSS Eigenschaft passt Seitenumbrüche vor dem aktuellen Element an.

Diese Eigenschaft gilt für Block-Elemente, die eine Box erzeugen. Sie gilt nicht für ein leeres <div>, das keine Box erzeugt.

Probieren Sie es aus

page-break-before: auto;

page-break-before: 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-before'
      </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-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

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

Werte

auto: Anfangswert. Automatische Seitenumbrüche (weder erzwungen noch verboten).
always: Erzwingen Sie immer Seitenumbrüche vor dem Element.
avoid: Vermeiden Sie Seitenumbrüche vor dem Element.
left: Erzwingt Seitenumbrüche vor dem Element, sodass die nächste Seite als linke Seite formatiert wird. Es ist die Seite, die auf der linken Seite des Buchrückens oder der Rückseite der Seite im Duplexdruck platziert wird.
right: Erzwingt Seitenumbrüche vor dem Element, sodass die nächste Seite als rechte Seite formatiert wird. Es ist die Seite, die auf der rechten Seite des Buchrückens oder der Vorderseite der Seite im Duplexdruck platziert wird.
recto: Wenn die Seiten von links nach rechts fortschreiten, wirkt dies wie right. Wenn die Seiten von rechts nach links fortschreiten, wirkt dies wie left.
verso: Wenn die Seiten von links nach rechts fortschreiten, wirkt dies wie left. Wenn die Seiten von rechts nach links fortschreiten, wirkt dies wie right.

Seitenumbruch-Alias

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

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

page-break-before	break-before
`auto`	`auto`
`left`	`left`
`right`	`right`
`avoid`	`avoid`
`always`	`page`

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Blocklevelelemente in normalem Fluss des Wurzelelements. User Agents können es auch auf andere Elemente wie `table-row`-Elemente anwenden.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Vermeiden eines Seitenumbruchs vor einem Element

css

/* Avoid page break before div elements of class note */
div.note {
  page-break-before: avoid;
}

Spezifikationen

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