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	Значение элемента наследуется от родительского элемента.