break-inside

/* Keyword values */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

/* Global values */
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: revert-layer;
break-inside: unset;

Каждый возможный разрыв (иначе говоря, каждая граница элемента) зависит от трёх свойств: значения break-after предыдущего элемента, значения break-before следующего элемента и значения break-inside содержащего элемента.

Для определения необходимости разрыва применяются следующие правила:

1. Если любое из трёх указанных значений является значением принудительного разрыва (always, left, right, page, column, или region), оно имеет приоритет. Если таких значений несколько, используется значение элемента, который появляется последним в потоке. Таким образом, значение break-before имеет приоритет перед значением break-after, которое, в свою очередь, имеет приоритет перед значением break-inside.
2. Если любое из трёх указанных значений является значением запрета разрыва (avoid, avoid-page, avoid-region, или avoid-column), такой разрыв не будет применён в этой точке.

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

auto

Разрешает, но не навязывает, вставку любого разрыва (страницы, колонки или области) внутри основного блока.

avoid

Запрещает вставку любого разрыва (страницы, колонки или области) внутри основного блока.

avoid-page

Запрещает разрыв страницы внутри основного блока.

avoid-column

Запрещает разрыв колонки внутри основного блока.

avoid-region

Запрещает разрыв области внутри основного блока.

По соображениям совместимости браузеры должны рассматривать устаревшее свойство page-break-inside как псевдоним для break-inside. Это гарантирует, что сайты, использующие page-break-inside продолжат работать как задумывалось. Подмножество значений должно быть проксировано следующим образом:

break-inside = 
  auto          |
  avoid         |
  avoid-page    |
  avoid-column  |
  avoid-region  

В следующем примере у нас есть контейнер, содержащий <h1>, охватывающий все колонки (достигнуто с помощью column-span: all) и ряд абзацев, расположенных в нескольких колонках с использованием column-width: 200px. Также у нас есть <figure>, содержащий изображение и подпись.

По умолчанию возможен разрыв между изображением и его подписью, чего мы не хотим. Для предотвращения этого мы установили break-inside: avoid на <figure>, что заставляет их всегда оставаться вместе.

HTML

<article>
  <h1>Main heading</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <figure>
    <img
      src="https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
  </figure>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

CSS

html {
  font-family: helvetica, arial, sans-serif;
}

body {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h1 + p {
  margin-top: 0;
}

p {
  line-height: 1.5;
  break-after: column;
}

figure {
  break-inside: avoid;
}

img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  font-size: 0.8rem;
  width: 70%;
}

article {
  column-width: 200px;
  gap: 20px;
}

• Многоколоночная компоновка
• Разбиение блоков с помощью CSS фрагментации