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), перерва не буде застосована в потрібному місці.
- Порада
-
Також зауважте, що на момент написання більшість браузерів підтримують властивість у специфікації CSS 2.1, але не останню специфікацію.
автор: Svitlana - Нотатка
-
Браузери WebKit і Blink не підтримують цю властивість, але деякі з них мають нестандартні властивості
автор: Svitlana-webkit-column-break-afterі-webkit-region break-withз аналогічними параметрами, якbreak-after.
Синтаксис
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
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.pageBreakAfter = ''; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 65 | 10 | 37 | 12 | 10 | |
| column | 50.0 | Не підтримується | Не підтримується | - | 12.0 | 10.0 |
| avoid-column | Не підтримується | Не підтримується | - | Не підтримується | 12.0 | Не підтримується |
| always | Не підтримується | Не підтримується | Не підтримується | Не підтримується | Не підтримується | Не підтримується |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 65 | 10 | |
| column | - | Не підтримується | Не підтримується | |
| avoid-column | Не підтримується | Не підтримується | - | |
| always | Не підтримується | Не підтримується | Не підтримується |
Приклади
+ запропонувати свій приклад у пісочниці
Після заголовка стоїть break-after: column — наступний вміст примусово починається з нової колонки, хоч місце в поточній ще було.
HTML
<div class="cols">
<h3>Заголовок</h3>
<p>Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</p>
</div>CSS
.cols {
columns: 2;
column-rule: 1px solid #ccc;
}
h3 {
break-after: column;
}Значення у дії
Використання
Коментарі
Коментарів ще немає — будьте першим!