CSS-свойство `box-decoration-break`

Свойство box-decoration-break CSS задаёт способ отображения фрагментов элемента при их переносе на несколько строк, колонок или страниц.

Попробуйте

-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;
}

Синтаксис

/* 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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

slice

Изначально элемент отображается так, как если бы его блок не был фрагментирован, после чего отображение этого гипотетического блока разрезается на части для каждой строки, колонки или страницы. Обратите внимание, что гипотетический блок может отличаться для каждого фрагмента, поскольку используется собственная высота блока, если разрыв происходит во встроенном направлении, и собственная ширина, если разрыв происходит в блочном направлении. Подробности см. в спецификации CSS.

clone

Каждый фрагмент блока отображается независимо, а указанные граница, внутренний и внешний отступы обрамляют каждый фрагмент. border-radius, border-image и box-shadow применяются к каждому фрагменту независимо. Фон также отрисовывается независимо для каждого фрагмента, поэтому фоновое изображение со значением background-repeat: no-repeat может повторяться несколько раз.

Описание

Указанное значение влияет на внешний вид следующих свойств:

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding

Формальное определение

Формальный синтаксис

box-decoration-break = 
  slice |
  clone

Примеры

Фрагменты встроенного блока

Встроенный элемент с оформлением блока может выглядеть неожиданно, если в нём есть разрывы строк, из-за исходного значения slice. В следующем примере показан эффект от добавления box-decoration-break: clone к элементу <span>, содержащему теги <br>:

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;
}

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;
}

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

Фрагменты блочного блока

В следующем примере показано, как выглядят блочные элементы с оформлением блока при наличии разрывов строк в многоколоночном макете. Обратите внимание: результат box-decoration-break: slice был бы эквивалентен первому элементу <div>, если бы они располагались вертикально.

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;
}

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;
}

<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>

Спецификации

Совместимость с браузерами

См. также

• break-after, break-before, break-inside