Свойство break-after

Свойство break-after определяет принципы расстановки разрыва страниц и колонок после текущего элемента. По умолчанию, разрывы страниц или колонок расстанавливаются автоматически и не наследуются от родительских элементов. Значения 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-after: auto; - равномерное распределение

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

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

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

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

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

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

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

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

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