Свойство -webkit-column-break-before

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

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

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

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

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

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

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

-webkit-column-break-before: always; - принудительные разрывы колонок

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

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

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

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

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

• Спецификация стандарта CSS 3
• Описание на Safari Developer Library