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


Властивість 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, але не останню специфікацію. Тому в деяких браузерах, ця властивість може не працювати, або працювати некоректно.

Синтаксис

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

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

auto

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

avoid

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

avoid-page

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

avoid-column

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

avoid-region

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

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.breakInside = '';

Переглядачі

Переглядач
Basic support

50.0

10.0

65.0

10.0

37.0

12.0

column and avoid-column

Full support

10.0

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

Full support

Full support

12.0

Переглядач
Basic support

50.0

65.0

10.0

column and avoid-column

Full support

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

Full support


Мобільних переглядачів ще не додано.

Приклади


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

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

Синтаксис

ul {


   break-inside: auto;


   break-inside: avoid;


   break-inside: avoid-page;


   break-inside: avoid-column;


   break-inside: avoid-region;





   break-inside: inherit;


   break-inside: initial;


   break-inside: unset;


}

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