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

Свойство break-before определяет, как должны вести себя разрывы страниц или колонок перед сгенерированным блоком. Если элемент не создает блок, свойство не оказывает никакого эффекта. Оно поддерживает такие значения, как auto, avoid, always, page, column, left и right.

Свойства page-break-inside, page-break-after и page-break-before помогают определить, как документ должен выглядеть при печати.

Когда несколько свойств разрыва применяются к одному и тому же элементу, принудительные разрывы (page, column, left, right, always) имеют приоритет над разрывами avoid. Свойство break-before применяется к самому элементу, тогда как break-inside применяется к его основному блоку.

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

Синтаксис

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

css

break-before: auto | avoid | always | page | column | left | right | initial | inherit;

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

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

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-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Try it Yourself »

Результат

Values of CSS break-before Property

Значения

Значение	Описание
auto	По умолчанию. Разрешает любой разрыв перед основным блоком.
avoid	Избегает любого разрыва перед основным блоком.
always	Принудительно создает разрыв перед основным блоком.
page	Принудительно создает разрыв страницы перед основным блоком.
column	Принудительно создает разрыв колонки перед основным блоком.
left	Принудительно создает один или два разрыва страниц перед основным блоком, чтобы следующая страница была оформлена как левая.
right	Принудительно создает один или два разрыва страниц перед основным блоком, чтобы следующая страница была оформлена как правая.
initial	Устанавливает для этого свойства значение по умолчанию.
inherit	Наследует это свойство от родительского элемента.

Практика

Что делает свойство CSS 'break-before'?

Создает разрыв перед элементом.Изменяет цвет элемента.Создает разрыв после элемента.Влияет на разрывы страниц, колонок или регионов перед созданием элемента.Изменяет форму элемента.

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

Синтаксис ​

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

Результат ​