css властивість break-before

Властивість break-before визначає, як розбиття сторінок або стовпців повинно вести себе перед показом контейнера. Якщо контейнер не сформовано, властивість ігнорується.

Більш конкретно, властивість дозволяє визначити, чи має місце перерва перед сформованим контейнером, і який тип розбивки (лінії) має бути.

Кожна можлива точка перерви (інакше кажучи, межа кожного елемента) залежить від трьох властивостей: значення break-after, значення break-before та значення break-inside.

Щоб визначити, чи необхідно зробити перерву між колонками, застосовуються наступні правила:

Якщо будь-яке з трьох потрібних значень є примусовим значенням переривання (always, left, right, page, column, або region), воно має перевагу. Якщо більше ніж одне значень робить перерву, то береться один елемент, який являється останнім у потоці (тобто, значення break-before має перевагу над значенням break-after, яке самостійно має перевагу над break-inside)
Якщо будь-яке з трьох потрібних значень уникає перерви (avoid, avoid-page, avoid-region, avoid-column), перерва не буде застосована в потрібному місці.

Нотатка:	Браузери WebKit і Blink не підтримують цю властивість, але деякі з них мають нестандартні властивості `-webkit-column-break-before` і `-webkit-region-break-with` з аналогічними параметрами, як `break-before`.
Порада:	Також зауважте, що на момент написання більшість браузерів підтримують властивість у специфікації CSS 2.1, але не останню специфікацію

Синтаксис

break-before: auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region;

Властивість break-before може отримувати 12 значень:


auto: Нi вказує, ні забороняє переривання сторінки або стовпця.

avoid: Уникання переривання сторінки після основного контейнера.

avoid-page: Уникання переривання сторінки після основного контейнера.

page: Завжди примусове переривання сторінки після основного контейнера.

left: Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована як ліва.

right: Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована як права.

recto: Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована або як ліва сторінка, або права сторінка, залежно від того, яка сторінка є другою.

verso: Змушує одне або два розбиття сторінки після основного контейнера, щоб наступна сторінка була відформатована або як ліва сторінка, або права сторінка, залежно від того, яка сторінка є першою.

avoid-column: Уникання переривання колонки після основного контейнера.

column: Завжди примусове переривання колонки після основного контейнера.

avoid-region: Уникання переривання області після основного контейнера.

region: Завжди примусове переривання області після основного контейнера.

Значення без задання:	auto
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object.style.pageBreakBefore = '';

Переглядач
Basic support	50.0	10.0	65.0	Не підтримується	37.0	12.0
column	Full support	10.0	Не підтримується	Full support	Full support	12.0
avoid-column	Не підтримується	10.0	Не підтримується	Не підтримується	Не підтримується	12.0
always	Не підтримується	Не підтримується	Не підтримується	Не підтримується	Не підтримується	Не підтримується

Переглядач
Basic support	50.0	65.0	Не підтримується
column	Full support	Не підтримується	Не підтримується
avoid-column	Не підтримується	Не підтримується	Full support
always	Не підтримується	Не підтримується	Не підтримується

Мобільних переглядачів ще не додано.

Приклади

Значення у дії

See the Pen <a href='https://codepen.io/MichaelBondar/pen/xXVKMr/'>xXVKMr</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання

See the Pen <a href='https://codepen.io/MichaelBondar/pen/MEyWwj/'>MEyWwj</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Синтаксис властивості

p {


break-before: auto;


break-before: avoid;


break-before: always;


break-before: all;





break-before: avoid-page;


break-before: page;


break-before: left;


break-before: right;


break-before: recto;


break-before: verso;





break-before: avoid-column;


break-before: column;





break-before: avoid-region;


break-before: region;





break-before: inherit;


break-before: initial;


break-before: unset;


}