break-after

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

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

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

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

/* Global values */
break-after: inherit;
break-after: initial;
break-after: revert;
break-after: revert-layer;
break-after: 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, то это принудительный разрыв колонки, внутри paged media (но не внутри multicol контейнера) — разрыв страницы.

all

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

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

avoid-page

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

page

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

left

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

right

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

recto

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

verso

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

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

avoid-column

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

column

Принуждает к разрыву колонки сразу после основного блока.

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

avoid-region

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

region

Принуждает к разрыву области сразу после основного блока.

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

break-after = 
  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-after: column на <p> элементах, чтобы принудительно разбить колонку после каждого из них, что означает, что вы получаете <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;
}

p {
  line-height: 1.5;
  break-after: column;
}

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

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