Eigenschaft „box-decoration-break“ in Chrome 130

Rachel Andrew

Veröffentlicht: 11. Oktober 2024

In Chrome 130 box-decoration-break CSS-Property mit dem Wert clone verfügbar ist, mit Unterstützung für Inline- und Blockfragmentierung. In diesem Beitrag erfahren Sie, um sie zu verwenden.

Inline-Fragmentierung

Inline-Fragmentierung tritt auf, wenn ein Inline-Element, z. B. ein Textstring, über mehrere Zeilen hinweg umgebrochen wird. Inline-Elemente haben ein Feld, an das Sie in der Regel nicht denken müssen, es sei denn, Sie versuchen, dem Element einen Hintergrund oder Rahmen hinzuzufügen. Im folgenden Beispiel ist ein Hintergrund mit einem border-radius wird einem Span hinzugefügt. Die Begrenzung ist nur am Anfang und Ende des Strings gebogen.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

Eine Zeile mit Text, der an der Stelle, an der er umgebrochen wird, einen Ausschnitt aus dem Hintergrund hat.

Der Anfangswert von box-decoration-break ist slice, d. h. die Aufschlüsselung erfolgt auf die Felder auswirken. Die neu unterstützte box-decoration-break: clone Jede Linie beginnt und endet jedoch mit dem abgerundeten Rahmen.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

Eine umgebrochene Textzeile mit Hintergrund und abgerundeten Ecken.

Blockfragmentierung

Blockfragmentierung tritt auf, wenn Sie Inhalte in Spalten mit einem mehrspaltigen Layout aufteilen oder beim Drucken die Inhalte auf Seiten aufgeteilt werden.

Im folgenden Beispiel ist der Inhalt in Spalten aufgeteilt und jeder Absatz einen Rahmen hat. Bei dem Startwert slice werden die Boxen am unteren und oberen Ende der Spalten zugeschnitten.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

Mehrere Spalten mit aufgeteilten Feldern.

Wenn ein Feld mit box-decoration-break: clone fragmentiert ist, wird jedes Fragment mit dem Rahmen umschlossen.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

Mehrere Spalten mit geklonten Feldern.

Dasselbe passiert, wenn Rahmen um Felder herum beim Drucken der Seite zerrissen werden. Wenn ein Feld auf zwei Seiten verteilt ist, wird der Rahmen des Felds auf der ersten Seite abgeschlossen und dann wird auf der zweiten Seite ein neues Feld geöffnet.