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

правити

Порада

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

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

Нотатка

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

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

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

Синтаксис

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

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

auto

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

автор: 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	Не підтримується	Не підтримується	37.0	12.0	10.0
column	50.0	Не підтримується	Не підтримується	-	12.0	10.0
avoid-column	Не підтримується	Не підтримується	-	Не підтримується	12.0	Не підтримується
always	Не підтримується	Не підтримується	Не підтримується	Не підтримується	Не підтримується	Не підтримується

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

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

Приклади

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

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

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

h3 {
    break-after: column;
}