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

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

Властивість `break-inside`

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

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

Синтаксис

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

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

Приклади

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/PJNYOB/'>PJNYOB</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/gGYwbq/'>gGYwbq</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Синтаксис

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;


}