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

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

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

Кожна можлива точка перерви (інакше кажучи, межа кожного елемента) залежить від трьох властивостей: значення 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-after` і `-webkit-region break-with` з аналогічними параметрами, як `break-after`.
Порада:	Також зауважте, що на момент написання більшість браузерів підтримують властивість у специфікації CSS 2.1, але не останню специфікацію.

Синтаксис

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приклади

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/QqLNRB/'>QqLNRB</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/YrKqbp/'>YrKqbp</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Синтаксис

div {


break-after: auto;


break-after: avoid;


break-after: always;


break-after: all;





break-after: avoid-page;


break-after: page;


break-after: left;


break-after: right;


break-after: recto;


break-after: verso;





break-after: avoid-column;


break-after: column;





break-after: avoid-region;


break-after: region;





break-after: inherit;


break-after: initial;


break-after: unset;


}