CSS break-inside-Eigenschaft

Die CSS-Eigenschaft break-inside definiert, wie Seiten-, Spalten- oder Regionsumbrüche innerhalb des generierten Kastens (Box) behandelt werden sollen. Sie wird ignoriert, wenn der generierte Kasten nicht spezifiziert ist. Gültige Werte sind auto, avoid, avoid-page, avoid-column und avoid-region.

Jeder Elementrand wird von drei Eigenschaften gesteuert:

Break-after, die auf das vorherige Element angewendet wird.
Break-before, die auf das nachfolgende Element angewendet wird.
Break-inside, die auf das umgebende Element angewendet wird.

Die CSS-Fragmentierungsspezifikation regelt das Umbruchverhalten wie folgt:

Erzwungene Umbrüche (z. B. always, left, right), die durch break-before oder break-after angegeben sind, haben Vorrang und werden ausgeführt.
Wenn kein erzwungener Umbruch ausgelöst wird, bestimmt break-inside, ob der Browser versucht, einen Umbruch innerhalb des Elements zu vermeiden. Die Einstellung auf avoid verhindert Seiten-, Spalten- oder Regionsumbrüche innerhalb des Kastens.

Anfangswert	auto
Anwendbar auf	Blockelemente.
Vererbbar	Nein.
Animierbar	Diskret.
Version	CSS3
DOM-Syntax	object.style.breakInside = "avoid";

Syntax

Syntax der CSS break-inside-Eigenschaft

css

break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;

Beispiel für die break-inside-Eigenschaft:

Beispiel der CSS break-inside-Eigenschaft mit dem Wert avoid

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        /* Safari and Chrome */
        -webkit-column-count: 3;
        -webkit-column-rule: 2px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-rule: 2px dotted #ccc;
        /* CSS3 */
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS break-inside-Eigenschaft

Werte

Wert	Beschreibung
auto	Standard. Erlaubt normale Seiten-, Spalten- oder Regionsumbrüche innerhalb des Elements.
avoid	Vermeidet jeden Seiten-, Spalten- oder Regionsumbruch innerhalb des Elements.
avoid-page	Vermeidet einen Seitenumbruch innerhalb des Elements.
avoid-column	Vermeidet einen Spaltenumbruch innerhalb des Elements.
avoid-region	Vermeidet einen Regionsumbruch innerhalb des Elements.
initial	Setzt die Eigenschaft auf ihren Standardwert (`auto`).
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was macht die CSS-Eigenschaft 'break-inside'?

Sie ermöglicht die Steuerung von Seiten-/Spalten-/Regionsumbrüchen innerhalb einer BoxSie steuert das Layout einer WebseiteSie ermöglicht die Implementierung von SchriftstilenSie wird verwendet, um einen Seiten-/Spalten-/Regionsumbruch innerhalb eines Elements zu vermeidenSie wird verwendet, um die Ränder eines Elements festzulegen

CSS break-inside-Eigenschaft ​

Syntax ​

Beispiel für die break-inside-Eigenschaft: ​

Ergebnis ​

Werte ​

Praxis ​

CSS break-inside-Eigenschaft

Syntax

Beispiel für die break-inside-Eigenschaft:

Ergebnis

Werte

Praxis