Свойство break-inside

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

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

  • CSS2 CSS3 auto - автоматический разрыв страницы или колоноки перед текущим элементом (по умолчанию)
  • CSS2 CSS3 avoid - отмена разрыва страницы внутри текущего элемента
  • CSS3 avoid-page - отмена разрыва страницы внутри текущего элемента
  • CSS3 avoid-column - отмена разрыва колонки внутри текущего элемента

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

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

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

.style {
   column-count: 3;
   column-gap: 2em;
   column-rule: 1px solid #666;
}
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
break-inside: avoid-column; - отмена разрыва колонок

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

.style {
   column-count: 3;
   column-gap: 2em;
   column-rule: 1px solid #666;
}
.style div {
   break-inside: avoid-column;
}
1-ый блок текст текст текст текст текст текст текст текст текст
2-ой блок текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
3-ий блок текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

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

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

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

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

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

Синтаксис:

auto | avoid | avoid-page | avoid-column

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

auto

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

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

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

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

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

страничные

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

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

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

Internet Explorer

5+

Firefox

2.0+

Chrome

1.0+

Safari

1.0+

Opera

8.5+