Свойство break-before

Свойство break-before определяет принципы расстановки разрыва страниц и колонок перед текущем элементом. По умолчанию, разрывы страниц или колонок расстанавливаются автоматически и не наследуются от родительских элементов. Значения always, avoid, left, right, page, avoid-page используются только при форматировании страничных документов, например, при печати, и игнорируются для представлений без разбивки, например, во время отображения в браузере. Значения column, avoid-column используются для многоколоночного текста.

Допустимые значения

  • CSS2 CSS3 auto - автоматический разрыв страницы или колоноки перед текущим элементом (по умолчанию)
  • CSS2 CSS3 always - обязательный разрыва страницы перед текущим элементом
  • CSS2 CSS3 avoid - отмена разрыва страницы перед текущим элементом
  • CSS2 CSS3 left - принудительная расстановка одного или двух разрывов страниц перед текущим элементом, таким образом, чтобы следующая страница форматировалась как левая страница
  • CSS2 CSS3 right - принудительная расстановка одного или двух разрывов страниц перед текущим элементом, таким образом, чтобы следующая страница форматировалась как правая страница
  • CSS3 page - обязательный разрыв и переход к новой страницы перед текущим элементом
  • CSS3 column - обязательный разрыв и переход к новой колонки перед текущим элементом
  • CSS3 avoid-page - отмена разрыва страницы перед текущим элементом
  • CSS3 avoid-column - отмена разрыва колонки перед текущим элементом

Примеры использования

break-before: auto; - равномерное распределение

Равномерное распределение содержания между колонок, при котором разрывы расстанавливаются автоматически в наиболее подходящих местах внутри или между любыми элементами. При равномерном распределении высота колонок получается примерно одинаковой с более-менее равномерной плотностью текста.

.style {
   column-count: 3;
   column-gap: 2em;
   column-rule: 1px solid #666;
}
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
break-before: column; - принудительные разрывы колонок

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

.style {
   column-count: 3;
   column-gap: 2em;
   column-rule: 1px solid #666;
}
.style hr {
   break-before: column;
}

текст текст текст текст текст текст текст текст текст
1-ая колонка
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
2-ая колонка
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
3-я колонка

Свойство break-before определено в спецификации CSS 3 модуль Multi-column Layout (многоколоночная разметка), применяется к блочным элементам, и действует на всех страничные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

  • break-after - правила установки разрыва колонки или страницы после элемента
  • break-inside - правила установки разрыва колонки или страницы внутри элемента
  • -webkit-column-break-after - правила установки разрыва колонки после элемента
  • -webkit-column-break-before - правила установки разрыва колонки перед элементом
  • -webkit-column-break-inside - правила установки разрыва колонки внутри элемента

Краткое описание

правила установки разрыва колонки или страницы перед элементом

Синтаксис:

auto | always | avoid | left | right | page | column | avoid-page | avoid-column

По умолчанию:

auto

Применяется к:

блочным элементам

Наследование:

не наследуется

Тип носителя:

страничные

Объектная модель документа (DOM):

[элемент].style.break-before

Кроссбраузерная совместимость

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+