Стовпці чудово справляються з потоковим та збалансованим вмістом. На жаль, не всі елементи витікають витончено. Іноді елементи застряють між стовпцями.
На щастя, ви можете сказати браузеру зберігати певні елементи разом із break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )На даний момент властивість універсально приймає значення autoі avoid.
Використовуйте avoidна елементі багатокалонного макета, щоб запобігти розбиванню властивості.
Погляньте ще раз на синтаксис цієї властивості, оскільки між браузерами є деякі відмінності.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Властивість приймає властивості після розриву сторінки та має однакові значення. На даний момент Firefox використовує page-break-inside.
Див. Приклад розбиття стовпця Pen (CSS-Tricks) від Katy DeCorah (@katydecorah) на CodePen.
Підтримка браузера
Властивості розриву сторінки:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | ТП |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Підтримка макета з кількома стовпцями:
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |