page-break-inside

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

Ursprungswert. Automatische Seitenumbrüche (weder erzwungen noch verhindert).

avoid

Vermeiden von Seitenumbrüchen innerhalb des Elements.

Seitenumbruch-Aliase

Die Eigenschaft page-break-inside ist jetzt 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

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch