Свойство CSS break-before
Свойство CSS break-before определяет, допускается ли разрыв перед основным блоком, нужно ли его избегать или принудительно вставить. Примеры и описание.
Свойство CSS break-before управляет тем, должен ли разрыв страницы, колонки или региона вставляться перед элементом. Это современная многоконтекстная замена свойства page-break-before, предназначенного только для печати: то же ключевое слово теперь работает для страничных носителей (печать/PDF), многоколоночных макетов (column-count) и CSS-регионов.
На этой странице рассматривается, что делает break-before, когда полезно каждое значение, как оно взаимодействует с соседними правилами разрыва, а также приводится интерактивный пример.
Зачем нужен break-before
Два совершенно разных сценария вёрстки требуют одного и того же вида управления:
- Печать. Когда длинный документ отправляется на принтер или экспортируется в PDF, браузер сам решает, где заканчивается одна страница и начинается следующая.
break-before: pageпозволяет принудительно начать новую страницу — например, чтобы каждый<h1>главы начинался вверху чистой страницы. - Многоколоночный текст. В макете
column-countсодержимое перетекает из одной колонки в следующую.break-before: columnзаставляет заголовок или рисунок начинаться с новой колонки, а не оказываться в нижней части предыдущей.
Ключевое слово avoid делает обратное: оно просит браузер не делать разрыв прямо перед элементом — именно так заголовок удерживается вместе со следующим за ним абзацем.
Как вычисляется break-before
Когда два соседних элемента запрашивают разрыв (один через break-after, следующий через break-before), браузер объединяет их и побеждает более сильный разрыв:
- Принудительные разрывы (
always,page,column,left,right) всегда применяются. avoid— лишь подсказка: браузер всё равно может сделать разрыв, если у него нет другого выхода (например, элемент выше одной страницы).- Если ни одна из сторон не задаёт принудительный разрыв,
autoпозволяет браузеру решать самостоятельно.
Учтите, что break-before действует только на элементы, которые генерируют блок и находятся в контексте фрагментации (печатный документ, многоколоночный контейнер или регион). На обычной экранной одноколоночной странице оно не имеет видимого эффекта.
Связанные свойства
- break-after — то же управление, но для конца элемента.
- break-inside — предотвращает разбиение элемента (строки таблицы, рисунка, карточки) через разрыв.
- columns и column-rule — задают многоколоночный макет, внутри которого работает
break-before: column.
| Начальное значение | auto |
|---|---|
| Применяется к | Блочные элементы. |
| Наследуется | Нет. |
| Анимируется | Дискретно. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.breakBefore = "auto"; |
Синтаксис
break-before: auto | avoid | always | page | column | left | right | initial | inherit;Пример: запрет разрыва в многоколоночном макете
В многоколоночном блоке ниже элемент <hr> между двумя секциями имеет break-before: avoid, что просит браузер не начинать новую колонку прямо перед горизонтальной линией. Измените ширину области результата так, чтобы текст расположился в три колонки, и увидите эффект:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.multicol {
background-color: #eee;
padding: 10px;
column-count: 3;
column-rule: 2px dotted #ccc;
}
.multicol hr {
break-before: avoid;
}
</style>
</head>
<body>
<h2>Break-before example</h2>
<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>Результат
Пример: принудительный разрыв страницы при печати
Распространённое требование к печати — начинать каждую главу с новой страницы. Примените break-before: page к заголовку главы, и правило вступит в силу в режиме предварительного просмотра печати (Ctrl/Cmd + P) или при экспорте в PDF:
.chapter {
break-before: page;
}<h1 class="chapter">Chapter 1</h1>
<p>Intro text…</p>
<h1 class="chapter">Chapter 2</h1>
<p>This heading begins on a new printed page.</p>Поскольку разрыв применяется только к страничным носителям, на обычном прокручиваемом экране он не виден — откройте диалог печати, чтобы увидеть результат.
Значения
| Значение | Описание |
|---|---|
| auto | По умолчанию. Допускает любой разрыв перед основным блоком. |
| avoid | Избегает любого разрыва перед основным блоком. |
| always | Принудительно вставляет разрыв перед основным блоком. |
| page | Принудительно вставляет разрыв страницы перед основным блоком. |
| column | Принудительно вставляет разрыв колонки перед основным блоком. |
| left | Вставляет один или два разрыва страницы перед основным блоком, чтобы следующая страница была левой. |
| right | Вставляет один или два разрыва страницы перед основным блоком, чтобы следующая страница была правой. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |