break-before

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

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

all

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

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

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