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


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

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

Кожна можлива точка перерви (інакше кажучи, межа кожного елемента) залежить від трьох властивостей: значення 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-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

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

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

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

Приклади


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

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

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

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;
}

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

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів