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

Свойство CSS break-inside определяет, как должны вести себя разрывы страниц, колонок или регионов внутри сгенерированного блока. Оно игнорируется, если сгенерированный блок не указан. Допустимые значения включают auto, avoid, avoid-page, avoid-column и avoid-region.

Границы каждого элемента контролируются тремя свойствами:

Break-after, которое применяется к предыдущему элементу.
Break-before, которое применяется к следующему элементу.
Break-inside, которое применяется к содержащему элементу.

Спецификация CSS Fragmentation обрабатывает поведение разрывов следующим образом:

Принудительные разрывы (например, always, left, right), указанные с помощью break-before или break-after, имеют приоритет и будут применены.
Если принудительный разрыв не вызван, break-inside определяет, пытается ли браузер избежать разрыва внутри элемента. Установка значения avoid предотвращает разрывы страниц, колонок или регионов внутри блока.

Начальное значение	auto
Применяется к	элементам блочного уровня.
Наследуется	Нет.
Анимация	Дискретная.
Версия	CSS3
Синтаксис DOM	object.style.breakInside = "avoid";

Синтаксис

Синтаксис свойства CSS break-inside

css

break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;

Пример свойства break-inside:

Пример свойства CSS break-inside со значением avoid

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        /* Safari and Chrome */
        -webkit-column-count: 3;
        -webkit-column-rule: 2px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-rule: 2px dotted #ccc;
        /* CSS3 */
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Try it Yourself »

Результат

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

Значения

Значение	Описание
auto	По умолчанию. Разрешает обычные разрывы страниц, колонок или регионов внутри элемента.
avoid	Избегает любых разрывов страниц, колонок или регионов внутри элемента.
avoid-page	Избегает разрыва страницы внутри элемента.
avoid-column	Избегает разрыва колонки внутри элемента.
avoid-region	Избегает разрыва региона внутри элемента.
initial	Устанавливает свойству значение по умолчанию (`auto`).
inherit	Наследует свойство от родительского элемента.

Практика

В чём заключается функция свойства CSS 'break-inside'?

Позволяет управлять разрывами страниц/колонок/регионов, попадающими внутрь блокаУправляет макетом веб-страницыПозволяет применять стили шрифтовИспользуется для предотвращения разрыва страницы/колонки/региона внутри элементаИспользуется для задания отступов элемента

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

Синтаксис ​

Пример свойства break-inside: ​

Результат ​

Значения ​

Практика ​

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

Синтаксис

Пример свойства break-inside:

Результат

Значения

Практика