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

CSS свойство break-after управляет поведением разрыва фрагментации после заданного блока. Разрыв фрагментации — это точка, в которой содержимое разделяется на два фрагмента: две печатные страницы, два столбца многоколоночного макета или два CSS-региона. С помощью break-after можно принудительно создать разрыв («начать следующий раздел на новой странице/столбце») или запретить его («удержать этот заголовок вместе со следующим за ним текстом»).

Поддерживаются следующие значения: auto, avoid, always, all, page, column, region, avoid-page, avoid-column и avoid-region.

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

Когда использовать break-after

Используйте break-after, когда естественный поток содержимого разделяется в неудобном месте:

Таблицы стилей для печати. Начинайте каждый раздел верхнего уровня с нового листа бумаги с помощью break-after: page, или не допускайте, чтобы итоговая строка счёта оказалась в начале следующей страницы.
Многоколоночный текст. Переместите подзаголовок в начало следующего столбца, а не оставляйте его в конце текущего.
CSS Regions / средства просмотра с разбивкой на страницы. Управляйте переходом содержимого из одного контейнера в другой.

break-after работает только внутри контекста фрагментации — печатного/постраничного документа, контейнера с column-count/column-width или цепочки регионов. На обычной прокручиваемой странице это свойство не имеет видимого эффекта, поэтому в примере ниже используется многоколоночный контейнер.

Как разрешаются свойства разрыва

На каждую границу элемента влияют три свойства:

break-after предыдущего элемента.
break-before текущего элемента.
break-inside родительского элемента.

Когда применяется несколько свойств разрыва, результат определяется следующими правилами разрешения:

Принудительные разрывы (например, page, column, always) имеют приоритет над запрещающими разрывами.
Если применяется несколько принудительных разрывов, break-before имеет приоритет над break-after, а break-after — над break-inside.
Если любое из применимых значений является запрещающим разрывом (avoid, avoid-page, avoid-column или avoid-region), разрыв не применяется.

Начальное значение	auto
Применяется к	Блочные элементы.
Наследуется	Нет.
Анимируется	дискретно
Версия	CSS3
DOM Синтаксис	object.style.breakAfter = "always";

Синтаксис

Синтаксис CSS свойства break-after

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Пример break-after с разрывом столбца

В трёхколоночном контейнере элементу <hr> задано break-after: column. Вместо автоматического баланса столбцов браузер завершает текущий столбец сразу после горизонтальной линии и продолжает остальное содержимое в следующем столбце — благодаря этому второй блок «Lorem ipsum» всегда начинается вверху нового столбца.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Попробуйте сами »

Результат

Пример break-after с разрывом страницы

Это наиболее распространённый пример из реальной практики: таблица стилей для печати, при которой каждая глава начинается на отдельной странице. Откройте предварительный просмотр печати в браузере (Ctrl/Cmd + P), чтобы увидеть, как каждый элемент <section> начинается с нового листа.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      @media print {
        section {
          break-after: page;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>This chapter prints on its own page.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Because the previous section has break-after: page,
         this chapter starts at the top of the next printed page.</p>
    </section>
    <section>
      <h2>Chapter 3</h2>
      <p>And so does this one.</p>
    </section>
  </body>
</html>

Значения

Значение	Описание
auto	Разрешает любой разрыв (страницы, столбца, региона) после главного блока.
avoid	Запрещает любой разрыв после главного блока.
always	Принудительно создаёт разрыв после главного блока.
all	Принудительно создаёт разрыв после главного блока и всех вмещающих блоков того же типа (например, всех столбцов или всех страниц).
page	Принудительно создаёт разрыв страницы после главного блока.
column	Принудительно создаёт разрыв столбца после главного блока.
region	Принудительно создаёт разрыв региона после главного блока.
avoid-page	Запрещает разрыв страницы после главного блока.
avoid-column	Запрещает разрыв столбца после главного блока.
avoid-region	Запрещает разрыв региона после главного блока.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует это свойство от родительского элемента.

Связанные свойства

break-before — управляет разрывом перед блоком (имеет приоритет над break-after на одной и той же границе).
break-inside — не позволяет отдельному блоку быть разбитым на фрагменты.
page-break-after — устаревший псевдоним только для печати, сохранённый для обратной совместимости.
columns и column-count — создают многоколоночный контекст, в котором действуют разрывы столбцов.

Практика

Какие из следующих значений являются допустимыми для CSS свойства 'break-after'?