CSS свойство break-inside
Свойство CSS break-inside определяет, допускается ли разрыв внутри основного блока. Узнайте о свойстве и попробуйте примеры.
Свойство CSS break-inside управляет тем, допускается ли разрыв фрагментации (разрыв страницы, колонки или региона) внутри блока элемента. Используйте его, чтобы держать фрагмент контента вместе и не допускать его разделения между двумя страницами при печати или двумя колонками в многоколоночном макете.
Распространённый практический пример: в многоколоночной статье нежелательно, чтобы рисунок, блок кода или заголовок с первым абзацем разрывались — половина в одной колонке, половина в следующей. Установка break-inside: avoid для такого элемента указывает браузеру перенести весь блок в следующую колонку или страницу, вместо того чтобы его разбивать.
Это свойство применяется только в контекстах фрагментации — то есть когда контент действительно распределяется по фрагментам:
- Печать (
@media print), где контент делится на страницы. - Многоколоночные макеты, где контент распределяется по колонкам (см.
column-count). - CSS-регионы (значение
avoid-region) — более старая спецификация с очень ограниченной поддержкой.
Когда контент не фрагментирован (обычный блок на экране), break-inside не имеет видимого эффекта.
Каждая граница элемента управляется тремя связанными свойствами:
- Break-after, которое применяется к предыдущему элементу.
- Break-before, которое применяется к следующему элементу.
- Break-inside, которое применяется к содержащему элементу.
Спецификация фрагментации CSS обрабатывает поведение разрывов следующим образом:
- Принудительные разрывы (например,
always,left,right), заданные черезbreak-beforeилиbreak-after, имеют приоритет и будут выполнены. - Если принудительный разрыв не задан,
break-insideопределяет, пытается ли браузер избежать разрыва внутри элемента. Значениеavoidпредотвращает разрывы страницы, колонки или региона внутри блока.
| Начальное значение | auto |
|---|---|
| Применяется к | блочным элементам. |
| Наследуется | Нет. |
| Анимируемое | Дискретно. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.breakInside = "avoid"; |
Синтаксис
Синтаксис CSS свойства break-inside
break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;Пример свойства break-inside:
Пример CSS свойства break-inside со значением avoid
<!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>Результат
![CSS свойство break-inside](https://api.w3docs.com/uploads/media/default/0001/03/e03a2e39ef51e5dd859aa1ab137e06e33638a3ba.png "CSS break-inside Property" =420x)
В примере выше три колонки содержат заголовок и абзац, а элемент <hr> имеет break-inside: avoid, чтобы разделитель никогда не разрывался между колонками.
Значения
| Значение | Описание |
|---|---|
| auto | По умолчанию. Допускает обычные разрывы страницы, колонки или региона внутри элемента. |
| avoid | Избегает любых разрывов страницы, колонки или региона внутри элемента. |
| avoid-page | Избегает разрыва страницы внутри элемента. |
| avoid-column | Избегает разрыва колонки внутри элемента. |
| avoid-region | Избегает разрыва региона внутри элемента. |
| initial | Устанавливает свойство в значение по умолчанию (auto). |
| inherit | Наследует свойство от родительского элемента. |
Поддержка браузерами
break-inside со значениями auto и avoid поддерживается всеми современными браузерами (Chrome, Edge, Firefox, Safari). Ключевые слова avoid-page и avoid-column имеют менее равномерную поддержку, а avoid-region фактически не поддерживается, поскольку CSS Regions так и не получил широкого распространения. Для надёжных кросс-браузерных результатов предпочтительно использовать break-inside: avoid.
В коде, связанном с печатью, можно встретить устаревшее свойство page-break-inside: avoid;. Это устаревший эквивалент break-inside: avoid, который сохраняется для обратной совместимости, поэтому принято объявлять оба:
.keep-together {
page-break-inside: avoid; /* legacy */
break-inside: avoid; /* modern */
}