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

Свойство break-inside CSS задаёт поведение разрывов страниц, колонок или регионов внутри генерируемого блока. Если генерируемого блока нет, свойство игнорируется.

Попробуйте

break-inside: auto;

break-inside: avoid;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'break-inside'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

@media print {
  #example-element {
    height: 25cm;
  }
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Синтаксис

/* 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