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

Рэйчел Эндрю

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

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

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

Фрагментация при встраивании — это то, что происходит, когда встраивающийся элемент, например, текстовая строка, разбивается на несколько строк. Встраивающиеся элементы имеют рамку, о которой обычно не нужно задумываться, если только вы не пытаетесь добавить к элементу фон или границу. В следующем примере к элементу `<span>` добавлен фон с 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;
}

Несколько столбцов с клонированными блоками.

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