page-break-inside

We'd love to hear more about your role and the company you work for

Please help us by answering a few questions.

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

Die page-break-inside CSS Eigenschaft passt die Seitenumbrüche innerhalb des aktuellen Elements an.

Probieren Sie es aus

page-break-inside: auto;

page-break-inside: avoid;

<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-inside'
      </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;
}

@media print {
  #example-element {
    height: 25cm;
  }
}

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-inside: auto;
page-break-inside: avoid;

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

Werte

auto: Standardwert. Automatische Seitenumbrüche (weder erzwungen noch verboten).
avoid: Vermeidet Seitenumbrüche innerhalb des Elements.

Seitenwechsel-Aliase

Die page-break-inside-Eigenschaft ist nun eine veraltete Eigenschaft, die durch break-inside ersetzt wurde.

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

page-break-inside	break-inside
`auto`	`auto`
`avoid`	`avoid`

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-inside = 
  avoid    |
  auto     |
  inherit

Beispiele

Vermeidung von Seitenumbrüchen innerhalb von Elementen

HTML

html

<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>

CSS

css

.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

Ergebnis

Spezifikationen

Specification
CSS Paged Media Module Level 3 # page-break-inside
CSS Fragmentation Module Level 3 # page-break-properties

Browser-Kompatibilität

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`page-break-inside` Deprecated
`auto` Deprecated
`avoid` Deprecated

Tip: you can click/tap on a cell for more information.

Full support: Full support
: Deprecated. Not for use in new websites.
: See implementation notes.

HTML

CSS

Ergebnis

Legend