page-break-inside

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

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

Probieren Sie es aus

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

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

avoid

Vermeidet Seitenumbrüche innerhalb des Elements.

Seitenumbruch-Aliasnamen

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

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 behandelt werden:

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

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-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

BCD tables only load in the browser

Siehe auch