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

Свойство break-before определяет, каким должен быть разрыв (страницы, колонки) перед сформированными блоками. Если нет сформированного блока, свойство игнорируется. Имеет четыре значения - auto, avoid, always, all.

Это свойство является устаревшим.
Значение по умолчанию auto
Применяется К блочным элементам.
Наследуется Нет
Анимируемое Discrete.
Версия CSS3
DOM Syntax object.style.breakBefore = "auto";

Синтаксис

break-before: auto | avoid | always | all | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .multicol {
      background-color: #eee;
      padding: 10px;
      /* Safari and Chrome */
      -webkit-column-count: 3;
      -webkit-column-rule: 2px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3; 
      -moz-column-rule: 2px dotted #ccc;
      /* CSS3 */
      column-count: 3; 
      column-rule: 2px dotted #ccc;
      }
      .multicol hr {
      break-before: column;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства break-before</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>
      <hr>
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    </div>
  </body>
</html>

Значения

Значение Описание
auto Вставляет разрыв (страницы, колонки) перед блоком.
avoid Избегает разрыва перед блоком.
always Всегда вставляет разрыв перед блоком.
all Вставляет разрыв любого типа перед блоком.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
50.0+ 12.0+ 65.0+ 37.0+

Практикуйте свои знания

What is the purpose of the CSS 'break-before' property?
Считаете ли это полезным?