W3docs
de
Anmelden

CSS box-decoration-break Eigenschaft

box-decoration-break ist eine CSS-Eigenschaft zum Dekorieren fragmentierter Boxen. Erfahren Sie mehr und sehen Sie Beispiele.

Die CSS-Eigenschaft box-decoration-break legt fest, wie background, padding, border, border-image, box-shadow, margin und clip-path eines Elements angewendet werden, wenn die Box fragmentiert ist — also über mehr als eine Zeile, Spalte oder Seite verteilt wird.

Diese Seite erklärt, was Fragmentierung bedeutet, wie sich die beiden Werte (slice und clone) unterscheiden, wann Sie diese Eigenschaft einsetzen und wie Sie sie mit praktischen Beispielen verwenden.

Was ist eine fragmentierte Box?

Eine Box ist fragmentiert, wenn sie nicht als ein einziges zusammenhängendes Rechteck dargestellt werden kann. Der häufigste Fall ist ein Inline-Element wie ein <span>, dessen Text auf mehrere Zeilen umbricht. Fragmentierung tritt aber auch bei Spaltenumbrüchen (in einem mehrspaltigem Layout) und bei Seitenumbrüchen beim Drucken auf.

Standardmäßig behandeln Browser das gesamte Element als eine einzige Box und schneiden sie nur an den Zeilengrenzen ab. Das bedeutet, dass Dekorationen wie der Rahmen oder border-radius einmal für das gesamte Element gezeichnet und dann abgeschnitten werden — so erscheinen abgerundete Ecken und der rechte/linke Rahmen nur ganz am Anfang und am Ende des Textes, nicht auf jeder Zeile. Mit box-decoration-break lässt sich das ändern.

Die Eigenschaft box-decoration-break hat zwei Hauptwerte:

  • slice (der Standardwert) wendet Dekorationen auf das gesamte Element an, als wäre es nicht fragmentiert, und schneidet die Box dann an den Rändern jedes Fragments ab. Ecken, Rahmen und Hintergründe werden dort „abgeschnitten", wo der Zeilenumbruch erfolgt.
  • clone wendet jede Dekoration unabhängig auf jedes Fragment an. Rahmen umschließen alle vier Kanten jedes Fragments, border-radius wird auf jedem Fragment wiederholt, und der Hintergrund wird für jedes Fragment vollständig neu gezeichnet.

Eine schnelle Merkhilfe: slice = eine Box, in Stücke geschnitten; clone = jedes Stück ist eine vollständige Box für sich.

Wann verwenden

Setzen Sie box-decoration-break: clone ein, wenn ein dekoriertes Inline-Element auf jeder Zeile konsistent aussehen soll — häufige Szenarien sind:

  • Hervorgehobener / „Textmarker"-Text, bei dem jede umgebrochene Zeile ihre abgerundeten Ecken und ihr Padding behalten soll.
  • Pill- oder Badge-Stile, die auf Inline-Links oder Tags angewendet werden, die umbrechen können.
  • Mehrspaltige oder gedruckte Layouts, bei denen ein umrandetes Element einen Spalten- oder Seitenumbruch überquert und Sie auf jedem Fragment einen vollständigen Rahmen statt eines offenen wünschen.
Anfangswertslice
Gilt fürAlle Elemente (und konzeptuell für jedes Box-Fragment).
VererbtNein.
VersionCSS3
DOM-Syntaxobject.style.boxDecorationBreak = "clone";

Syntax

Syntax der CSS box-decoration-break Eigenschaft

box-decoration-break: slice | clone | initial | inherit | unset;

Hier ist ein Beispiel mit dem Wert clone, bei dem Dekorationen auf jedes Fragment angewendet werden, als wären die Fragmente eigenständige Elemente.

Beispiel der CSS box-decoration-break Eigenschaft mit dem Wert clone

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #1c87c9;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
      }
      span.box {
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>Here the box-decoration-break is set to "clone".</p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS box-decoration-break Eigenschaft mit dem Wert clone

Moderne Browser unterstützen diese Eigenschaft nativ ohne Präfixe, aber das Präfix -webkit- ist in den Beispielen für die Abwärtskompatibilität enthalten.

Sehen wir uns ein weiteres Beispiel an, bei dem der Wert slice auf die Box angewendet wird. Hier wird die Box in Stücke geschnitten.

Beispiel der CSS box-decoration-break Eigenschaft mit dem Wert slice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #ccc;
      }
      span.box {
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS box-decoration-break Eigenschaft mit dem Wert slice

Sehen wir uns nun an, wie ein Box-Shadow auf die aufgeteilte Box angewendet wird.

Beispiel der CSS box-decoration-break Eigenschaft mit dem Wert slice und Schatten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        border: 3px solid #8ebf42;
        padding: 0em 1em;
        border-radius: 12px;
        font-size: 20px;
        line-height: 2;
        background-color: #cccccc;
        box-shadow: 5px 4px 10px #666666;
        box-decoration-break: slice;
        -webkit-box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Box-decoration-break example</h2>
    <p>
      Here the box-decoration-break is set to "slice" which is the default value of this property.
    </p>
    <span>Box<br />decoration<br />break<br />property<br />example.</span>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS box-decoration-break Eigenschaft mit dem Wert slice und Schatten

Werte

WertBeschreibung
sliceBox-Dekorationen werden auf das gesamte Element angewendet und an den Rändern der Element-Fragmente abgeschnitten.
cloneBox-Dekorationen werden auf jedes Fragment einzeln angewendet.
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.
unsetVerhält sich wie inherit, wenn die Eigenschaft vererbt wird, andernfalls wie initial.

Browserunterstützung und Präfixe

box-decoration-break wird von allen modernen Browsern unterstützt. Firefox unterstützt die Eigenschaft ohne Präfix; Chrome, Edge, Safari und andere WebKit/Blink-Browser benötigten historisch das Präfix -webkit-box-decoration-break, daher empfiehlt es sich, beide zu deklarieren:

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Platzieren Sie die Eigenschaft mit Präfix immer vor der Standardeigenschaft, damit die unpräfixierte Deklaration Vorrang hat, wo sie unterstützt wird.

Verwandte Eigenschaften

  • box-shadow — fügt Schatten hinzu, die diese Eigenschaft pro Fragment klonen kann.
  • border-radius — abgerundete Ecken, die clone auf jeder Zeile wiederholt.
  • CSS columns — mehrspaltige Layouts, in denen Fragmentierung auftritt.
  • padding und margin — der Abstand, der durch Fragmentierung beeinflusst wird.

Übung

Übung
Was bewirkt die CSS-Eigenschaft box-decoration-break?
Was bewirkt die CSS-Eigenschaft box-decoration-break?
Was this page helpful?