Свойство break-inside CSS

определение и использование

атрибут break-inside определяет, должен ли происходить разрыв страницы (page-break), разрыв столбца (column-break) или разделение области (region-break) внутри заданного элемента.

атрибут break-inside расширяет атрибут page-break-inside из CSS2.

Используя break-inside, вы можете сообщить браузеру избегать разрыва внутри изображений, фрагментов кода, таблиц и списков.

пример

избегайте разрыва страницы внутри элементов <img>:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

CSS syntax

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

значение атрибута

значение описание
auto по умолчанию. Автоматически выполняйте разрыв страницы, столбца и области внутри элементов.
avoid избегайте разрыва страницы, столбца или области внутри элементов.
avoid-column избегайте разрыва столбца внутри элементов.
avoid-page избегайте разрыва страницы внутри элементов.
avoid-region избегайте разделения элементов внутри.
initial установите этот атрибут в его значение по умолчанию. См. также initial.
inherit получает этот атрибут от родительского элемента. См. также inherit.

технические детали

по умолчанию: auto
наследование: нет
создание анимации: не поддерживается. См. также:атрибуты, связанные с анимацией.
версия: CSS3
JavaScript syntax: object.style.breakInside="always"

более сложные примеры

избегайте разрыва страницы внутри элементов <table>, <ul>, <ol>:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

поддержка браузера

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0