break-inside

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2019.

* Some parts of this feature may have varying levels of support.

Die break-inside CSS Eigenschaft legt fest, wie Seiten-, Spalten- oder Bereichswechsel innerhalb eines generierten Kastens verhalten sollen. Wenn kein generierter Kasten vorhanden ist, wird die Eigenschaft ignoriert.

Probieren Sie es aus

break-inside: auto;

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 '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 */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

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

Jeder mögliche Umbruchpunkt (mit anderen Worten, jede Elementgrenze) wird von drei Eigenschaften beeinflusst: dem break-after Wert des vorherigen Elements, dem break-before Wert des nächsten Elements und dem break-inside Wert des umschließenden Elements.

Um festzustellen, ob ein Umbruch durchgeführt werden muss, werden die folgenden Regeln angewendet:

  1. Wenn einer der drei betreffenden Werte ein erzwungener Umbruchwert ist (always, left, right, page, column oder region), hat er Vorrang. Wenn mehr als einer solcher Umbrüche ist, wird der Wert des Elements verwendet, das zuletzt im Fluss erscheint. Daher hat der break-before Wert Vorrang vor dem break-after Wert, der wiederum Vorrang vor dem break-inside Wert hat.
  2. Wenn einer der drei betreffenden Werte ein Vermeidung eines Umbruchs Wert ist (avoid, avoid-page, avoid-region oder avoid-column), wird an dieser Stelle kein solcher Umbruch angewendet.

Sobald erzwungene Umbrüche angewendet wurden, können bei Bedarf weiche Umbrüche hinzugefügt werden, jedoch nicht an Elementgrenzen, die in einem entsprechenden avoid Wert aufgelöst werden.

Werte

auto

Erlaubt, erzwingt aber keinen Umbruch (Seite, Spalte oder Bereich) innerhalb des Hauptkastens.

avoid

Vermeidet jeden Umbruch (Seite, Spalte oder Bereich) innerhalb des Hauptkastens.

avoid-page

Vermeidet jeden Seitenumbruch innerhalb des Hauptkastens.

avoid-column

Vermeidet jeden Spaltenumbruch innerhalb des Hauptkastens.

avoid-region

Vermeidet jeden Bereichsumbruch innerhalb des Hauptkastens.

Seitenumbruch-Aliase

Aus Kompatibilitätsgründen sollte die veraltete page-break-inside Eigenschaft von Browsern als Alias von break-inside behandelt werden. Dies stellt sicher, dass Websites, die page-break-inside verwenden, weiterhin wie beabsichtigt funktionieren. Ein Teil der Werte sollte folgendermaßen als Alias behandelt werden:

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

Formale Definition

Anfangswertauto
Anwendbar aufBlocklevel Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

break-inside = 
  auto          |
  avoid         |
  avoid-page    |
  avoid-column  |
  avoid-region

Beispiele

Vermeidung eines Umbruchs innerhalb einer Abbildung

Im folgenden Beispiel haben wir einen Container, der eine <h1>-Überschrift enthält, die sich über alle Spalten erstreckt (erreicht durch column-span: all), und eine Reihe von Absätzen, die mit column-width: 200px in mehreren Spalten angeordnet sind. Wir haben auch eine <figure>, die ein Bild und eine Bildunterschrift enthält.

Standardmäßig kann es zu einem Umbruch zwischen dem Bild und seiner Bildunterschrift kommen, was wir nicht möchten. Um dies zu vermeiden, haben wir break-inside: avoid auf das <figure> gesetzt, was dazu führt, dass sie immer zusammenbleiben.

HTML

html
<article>
  <h1>Main heading</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <figure>
    <img
      src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
  </figure>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

CSS

css
html {
  font-family: helvetica, arial, sans-serif;
}

body {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h1 + p {
  margin-top: 0;
}

p {
  line-height: 1.5;
  break-after: column;
}

figure {
  break-inside: avoid;
}

img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  font-size: 0.8rem;
  width: 70%;
}

article {
  column-width: 200px;
  gap: 20px;
}

Ergebnis

Spezifikationen

Specification
CSS Fragmentation Module Level 3
# break-within
CSS Regions Module Level 1
# region-flow-break
CSS Multi-column Layout Module Level 1
# break-before-break-after-break-inside

Browser-Kompatibilität

Siehe auch