Свойство box-decoration-break в Chrome 130.

Rachel Andrew

Опубликовано: 11 октября 2024 г.

В Chrome 130 доступно CSS-свойство box-decoration-break со значением clone с поддержкой встроенной и блочной фрагментации. В этом посте объясняется, почему и как его использовать.

Встроенная фрагментация

Встроенная фрагментация — это то, что происходит, когда встроенный элемент, например текстовая строка, разбивается на несколько строк. Встроенные элементы имеют рамку, о которой обычно не нужно думать, если только вы не попытаетесь добавить к элементу фон или рамку. В следующем примере к диапазону добавляется фон с border-radius . Граница изгибается только в начале и конце строки.

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

Начальное значение box-decoration-break — slice , что дает эффект нарезки на коробках. Однако новая поддержка box-decoration-break: clone означает, что каждая строка начинается и заканчивается закругленной границей.

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

Фрагментация блоков

Фрагментация блоков происходит, если вы разбиваете контент на столбцы с многостолбцовым макетом или когда вы печатаете, и контент разбивается на страницы.

В следующем примере содержимое разбито на столбцы, и каждый абзац имеет границу. При начальном значении slice поля нарезаются внизу и вверху столбцов.

.columns {
  column-count: 5;
}

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

При использовании box-decoration-break: clone , когда блок фрагментирован, каждый фрагмент обрамляется рамкой.

.columns {
  column-count: 5;
}

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

То же самое происходит, если у вас есть границы в полях, которые фрагментируются при печати страницы. Если блок разделен на две страницы, граница блока завершится на первой странице, а затем откроется новый блок на второй странице.