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

Свойство CSS break-after определяет, как должны вести себя разрывы страниц, колонок или регионов после сгенерированного блока. Оно поддерживает следующие значения: auto, avoid, always, all, page, column, region, avoid-page, avoid-column и avoid-region.

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

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

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

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

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

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

Синтаксис

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

css

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

Пример свойства break-after:

Пример свойства CSS break-after со значением column

html

<!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>

Try it Yourself »

Результат

Значения свойства CSS break-after

Значения

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

Практика

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

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

Синтаксис ​

Пример свойства break-after: ​

Результат ​