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

Определение и применение

Свойство break-inside управляет разрывами страниц и колонок внутри элемента.

Свойство действует в контексте фрагментации: например, в многоколоночной раскладке или при печати. Обычный экранный блок без такого контекста не показывает разрывов. Запрет разрыва может быть нарушен, если содержимое не помещается целиком.

Для нового кода используйте break-inside. Старое page-break-inside сохранено как совместимый псевдоним для разрывов страниц.

Попробуйте значения break-inside

Сцена использует колонки. avoid-column старается сохранить блок целиком, если он помещается в колонку.

Значение свойства

break-inside: auto

HTML и CSS примера
HTML
<div class="columns">
  <div style="height: 150px">Вступление</div>
  <div class="demo-target">
    Первая строка<br />Вторая строка<br />Третья строка<br />Четвёртая строка<br />Пятая
    строка
  </div>
  <p>Окончание</p>
</div>
CSS
.columns {
  width: 100%;
  max-width: 300px;
  height: 230px;
  column-count: 2;
  column-fill: auto;
  column-gap: 18px;
  overflow: auto;
  color: #172c3d;
  font: 14px/1.4 system-ui;
}
p {
  margin: 0 0 10px;
}
.demo-target {
  background: #ffe4bd;
  break-inside: auto;
}

Поддержка браузерами

Спецификации: CSS break, CSS regions, CSS multicol

Поддерживается во всех основных браузерах с 2019 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.break-inside
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
break-inside✓50✓12✓65✓37✓10✓50✓65✓37✓10✓5.0✓50✓10
auto✓50✓79✓65✓37✓10✓50✓65✓37✓10✓5.0✓50✓10
avoid✓50✓79✓65✓37✓10✓50✓65✓37✓10✓5.0✓50✓10
avoid-column✓50✓79✓92✓37✓10✓50✓92✓37✓10✓5.0✓50✓10
avoid-page✓50✓79✓92✓37✓10✓50✓92✓37✓10✓5.0✓50✓10
В многоколоночном контейнере✓50✓12✓65✓37✓10✓50✓65✓37✓10✓5.0✓50✓10
avoid-column✓50✓12✓92✓37✓10✓50✓92✓37✓10✓5.0✓50✓10
Supported in Paged Media✓50✓12✓65✓37✓10✓50✓65✓37✓10✓5.0✓50✓10
avoid-page✓51✓12✓92✓38×✓51✓92✓41×✓5.0✓51×

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
break-inside: auto | avoid | avoid-page | avoid-column | avoid-region;

/* Глобальные значения */
break-inside: initial | inherit | unset | revert | revert-layer;

| — выбор варианта.

JavaScript синтаксис:

JavaScript
element.style.breakInside = "avoid";

Начальное значение свойства

auto.

Значения свойства

Значения break-inside
Значение Описание
auto Разрыв страниц внутри элемента (при печати), колонок или определённых областей происходит в автоматическом режиме (при необходимости). Начальное значение.
avoid Запрещает разрыв страниц (при печати/ в колоннах) внутри элемента (если возможно).
avoid-page Предотвращает разрыв страницы внутри текущего элемента.
avoid-column Предотвращает разрыв колонки внутри текущего элемента.
avoid-region Избегает разрыва CSS-региона. CSS Regions не имеют широкой современной поддержки.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства break-inside устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Fragmentation — спецификация break-inside.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Сохранение блока в одной колонке

Замените avoid на auto. Карточка сможет разделиться между колонками.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.spacer {
    height: 100px;
}
.target {
    background: #c5dbea;
    line-height: 24px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Сохранение блока в одной колонке</title>
  </head>
  <body>
    <div class="sample">
      <div class="spacer">Вводный текст</div>
      <div class="target">Карточка<br />Строка 2<br />Строка 3<br />Строка 4</div>
    </div>
  </body>
</html>
style.css
CSS
.sample {
    column-count: 2;
    column-fill: auto;
    height: 180px;
}
.target {
    break-inside: avoid;
}