`box-decoration-break` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die CSS-Eigenschaft box-decoration-break gibt an, wie die Fragmente eines Elements dargestellt werden sollen, wenn sie über mehrere Linien, Spalten oder Seiten gebrochen werden.

Probieren Sie es aus

-webkit-box-decoration-break: slice;
box-decoration-break: slice;

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

<section id="default-example">
  <div id="example-container">
    <span id="example-element">This text breaks across multiple lines.</span>
  </div>
</section>

#example-container {
  width: 14rem;
}

#example-element {
  background: linear-gradient(to bottom right, #6f6f6f, black);
  color: white;
  box-shadow:
    8px 8px 10px 0 #ff1492,
    -5px -5px 5px 0 blue,
    5px 5px 15px 0 yellow;
  padding: 0 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
}

Syntax

css

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

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

Die Eigenschaft box-decoration-break wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

slice: Das Element wird zunächst so gerendert, als ob seine Box nicht fragmentiert wäre, woraufhin das Rendering für diese hypothetische Box in Stücke für jede Linie/Spalte/Seite geschnitten wird. Beachten Sie, dass die hypothetische Box unterschiedlich für jedes Fragment sein kann, da sie ihre eigene Höhe verwendet, wenn der Bruch in der Inline-Richtung auftritt, und ihre eigene Breite, wenn der Bruch in der Blockrichtung auftritt. Details finden Sie in der CSS-Spezifikation.
clone: Jedes Box-Fragment wird unabhängig mit dem angegebenen Rand, Polsterung und Abstand dargestellt, die jedes Fragment umschließen. Der border-radius, border-image und box-shadow werden unabhängig auf jedes Fragment angewendet. Auch der Hintergrund wird unabhängig für jedes Fragment gezeichnet, was bedeutet, dass ein Hintergrundbild mit background-repeat: no-repeat dennoch mehrfach wiederholt werden kann.

Beschreibung

Der angegebene Wert wird das Erscheinungsbild der folgenden Eigenschaften beeinflussen:

Formale Definition

Anfangswert	`slice`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

box-decoration-break = 
  slice  |
  clone

Ein Inline-Element mit einer Box-Dekoration kann ein unerwartetes Erscheinungsbild haben, wenn es aufgrund des anfänglichen Wertes slice Zeilenumbrüche enthält. Das folgende Beispiel zeigt die Wirkung von box-decoration-break: clone auf einen <span>, der <br>-Tags enthält:

body {
  display: flex;
  background-color: grey;
  justify-content: space-around;
}

span {
  padding: 0em 1em;
  border-radius: 1rem;
  border-style: solid;
  margin: 1rem;
  font: 22px sans-serif;
  line-height: 2;
}

css

span {
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink,
    -5px -5px 5px 0px blue,
    5px 5px 15px 0px yellow;
}

#clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html

<p>
  <span>The<br />quick<br />orange fox</span>
</p>
<p>
  <span id="clone">The<br />quick<br />orange fox</span>
</p>

Block-Box-Fragmente

Das folgende Beispiel zeigt, wie Block-Elemente mit Box-Dekoration aussehen, wenn sie Zeilenumbrüche in einem Multi-Column-Layout enthalten. Beachten Sie, wie das Ergebnis von box-decoration-break: slice dem ersten <div> entsprechen würde, wenn sie vertikal gestapelt wären.

body {
  background-color: grey;
}
span {
  padding: 0em 2em;
  border-radius: 250px;
  border-style: solid;
  margin-left: 1em;
  font: 20px sans-serif;
  line-height: 1.5;
}

css

span {
  display: block;
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    inset 8px 8px 10px 0px deeppink,
    inset -5px -5px 5px 0px blue,
    inset 5px 5px 15px 0px yellow;
}
#base {
  width: 33%;
}
.columns {
  columns: 3;
}

.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html

<div id="base">
  <span>The<br />quick<br />orange fox</span>
</div>
<br />

<h2>'box-decoration-break: slice'</h2>
<div class="columns">
  <span>The<br />quick<br />orange fox</span>
</div>

<h2>'box-decoration-break: clone'</h2>
<div class="columns">
  <span class="clone">The<br />quick<br />orange fox</span>
</div>