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

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

Наприклад, при роботі з макетами з декількома стовпцями, ви можете віддати перевагу упорядкованим спискам у межах одного стовпця (замість того, щоб переходити до наступного стовпця через частину списку). У цьому випадку ви можете використовувати властивість break-in, щоб уникнути цієї небажаної перерви.

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

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

Синтаксис

break-inside: auto | avoid | avoid-page | avoid-column;

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

auto

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

автор: Svitlana

правити

avoid

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

автор: Svitlana

правити

avoid-page

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

автор: Svitlana

правити

avoid-column

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

автор: Svitlana

правити

avoid-region

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

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

ul {
    break-inside: avoid;
    background: #eef6ff;
}