Właściwość box-decoration-break w Chrome 130

Rachel Andrew

Data publikacji: 11 października 2024 r.

W Chrome 130 box-decoration-break Właściwość CSS o wartości clone jest dostępny, z obsługą fragmentacji w tekście i blokowania. Z tego artykułu dowiesz się, dlaczego i jak go używać.

Uwaga: przeglądarka Firefox w pełni obsługuje też tę właściwość. W przeglądarce Safari box-decoration-break jest obsługiwany z prefiksem -webkit-, i tylko do fragmentacji w tekście.

Wbudowana fragmentacja

Fragmentacja w wierszu występuje, gdy element w wierszu, np. ciąg znaków tekstowych, jest dzielony na kilka wierszy. Elementy śródtekstowe mają pole, o którym zwykle nie musisz myśleć, chyba że chcesz dodać do elementu tło lub obramowanie. W poniższym przykładzie przedstawiono tło z border-radius dodanym do spanu. Obramowanie krzywe jest tylko krzywe początku i końca ciągu znaków.

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

Początkowa wartość zmiennej box-decoration-break to slice, co daje wynikowy wycinek na pola z danymi. Nowa funkcja wspierana przez box-decoration-break: clone oznacza jednak, że każda linia zaczyna się i kończy zaokrągloną ramką.

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

Blokuj fragmentację

Blokowanie fragmentacji ma miejsce, jeśli podzielisz treść na kolumny z układ wielokolumnowy lub w przypadku drukowania, gdy treść jest podzielona na strony.

W poniższym przykładzie treść została podzielona na kolumny, a każdy akapit ma obramowanie. Przy początkowej wartości slice pola są dzielone na dole i na górze kolumn.

.columns {
  column-count: 5;
}

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

W przypadku box-decoration-break: clone, gdy pole jest podzielone, każdy fragment jest otoczony ramką.

.columns {
  column-count: 5;
}

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

To samo dzieje się, jeśli masz ramki, które są fragmentowane, drukowanie strony. Jeśli pole jest podzielone na 2 strony, obramowanie tego pola będzie widoczne na pierwszej stronie, a na drugiej stronie otworzy się nowe pole.