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

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

Попробуйте

break-after: auto;

break-after: 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-after'</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-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

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

all

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

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

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