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), перерва не буде застосована в потрібному місці.

правити

Порада

Також зауважте, що на момент написання більшість браузерів підтримують властивість у специфікації CSS 2.1, але не останню специфікацію

автор: Svitlana правити

Нотатка

Браузери WebKit і Blink не підтримують цю властивість, але деякі з них мають нестандартні властивості -webkit-column-break-before і -webkit-region-break-with з аналогічними параметрами, як break-before.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

auto

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

автор: Svitlana

правити

avoid

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

автор: Svitlana

правити

avoid-page

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

автор: Svitlana

правити

page

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

автор: Svitlana

правити

left

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

автор: Svitlana

правити

right

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

автор: Svitlana

правити

recto

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

автор: Svitlana

правити

verso

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

автор: Svitlana

правити

avoid-column

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

автор: Svitlana

правити

column

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

автор: Svitlana

правити

avoid-region

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

автор: Svitlana

правити

region

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">
    <p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
    <h3 class="new">Розділ</h3>
    <p>Текст після заголовка, який почав нову колонку.</p>
</div>

.cols {
    columns: 2;
    column-rule: 1px solid #ccc;
}

.new {
    break-before: column;
}