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


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

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

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

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

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

Не підтримується

Не підтримується


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

Приклади


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

Використання

Синтаксис

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;


}

Додаткові посилання