Свойство CSS `break-before`

Свойство break-before CSS задаёт поведение разрывов страниц, колонок или областей перед созданным блоком. Если созданного блока нет, свойство игнорируется.

Попробуйте

break-before: auto;

break-before: page;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'break-before'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Синтаксис

/* Generic break values */
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/* Page break values */
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/* Column break values */
break-before: avoid-column;
break-before: column;

/* Region break values */
break-before: avoid-region;
break-before: region;

/* Global values */
break-before: inherit;
break-before: initial;
break-before: revert;
break-before: revert-layer;
break-before: unset;

На каждую возможную точку разрыва (иначе говоря, на каждую границу элементов) влияют три свойства: значение break-after предыдущего элемента, значение break-before следующего элемента и значение break-inside содержащего элемента.

Чтобы определить, должен ли быть выполнен разрыв, применяются следующие правила:

1. Если одно из трёх рассматриваемых значений является значением принудительного разрыва (always, left, right, page, column или region), оно имеет приоритет. Если таким разрывом являются несколько значений, выбирается значение элемента, который расположен позже в потоке (то есть значение break-before имеет приоритет над значением break-after, которое, в свою очередь, имеет приоритет над значением break-inside).
2. Если одно из трёх рассматриваемых значений является значением запрета разрыва (avoid, avoid-page, avoid-region или avoid-column), такой разрыв в этой точке не будет применён.

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

Значения

Общие значения разрывов

auto

Разрешает, но не принуждает к вставке разрыва (страницы, колонки или области) непосредственно перед основным блоком.

avoid

Запрещает вставку разрыва (страницы, колонки или области) непосредственно перед основным блоком.

always

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

all

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

Значения разрыва страницы

avoid-page

Запрещает разрыв страницы непосредственно перед основным блоком.

page

Принудительно вставляет разрыв страницы непосредственно перед основным блоком.

left

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

right

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

recto

Принудительно вставляет один или два разрыва страницы непосредственно перед основным блоком — столько, сколько необходимо, чтобы следующая страница была лицевой. (Лицевая страница — правая страница в развороте с направлением письма слева направо или левая страница в развороте с направлением письма справа налево.)

verso

Принудительно вставляет один или два разрыва страницы непосредственно перед основным блоком — столько, сколько необходимо, чтобы следующая страница была оборотной. (Оборотная страница — левая страница в развороте с направлением письма слева направо или правая страница в развороте с направлением письма справа налево.)

Значения разрыва колонки

avoid-column

Запрещает разрыв колонки непосредственно перед основным блоком.

column

Принудительно вставляет разрыв колонки непосредственно перед основным блоком.

Значения разрыва области

avoid-region

Запрещает разрыв области непосредственно перед основным блоком.

region

Принудительно вставляет разрыв области непосредственно перед основным блоком.

Псевдонимы разрыва страницы

Для обеспечения совместимости браузеры должны обрабатывать устаревшее свойство page-break-before как псевдоним break-before. Это позволяет сайтам, использующим page-break-before, продолжать работать так, как задумано. Часть значений должна иметь следующие псевдонимы:

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

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

break-before = 
  auto |
  avoid |
  always |
  all |
  avoid-page |
  page |
  left |
  right |
  recto |
  verso |
  avoid-column |
  column |
  avoid-region |
  region

Примеры

Разбиение на аккуратные колонки

В следующем примере у нас есть контейнер, содержащий <h1>, растянутый на все колонки (с помощью column-span: all), а также несколько <h2> и абзацев, размещённых в нескольких колонках с помощью column-width: 200px.

По умолчанию подзаголовки и абзацы располагались довольно хаотично, поскольку заголовки не находились на одном уровне. Однако мы использовали break-before: column для элементов <h2>, чтобы принудительно вставить разрыв колонки перед каждым из них. В результате каждый <h2> располагается аккуратно в верхней части своей колонки.

HTML

<article>
  <h1>Main heading</h1>

  <h2>Subheading</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <h2>Subheading</h2>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <h2>Subheading</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>Subheading</h2>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
  break-before: column;
}

p {
  line-height: 1.5;
}

article {
  column-width: 200px;
  gap: 20px;
}

Результат

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

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

См. также

• Изучите: многоколоночная компоновка
• Разбиение блоков с помощью фрагментации CSS