break-inside: сохранить короткий блок при разбиении
Break-inside управляет допустимостью разрыва внутри элемента при фрагментации на страницы или колонки. Оно помогает не отделять подпись от компактного примера.
Назначение
Break-inside управляет допустимостью разрыва внутри элемента при фрагментации на страницы или колонки. Оно помогает не отделять подпись от компактного примера.
Как это работает
Avoid просит избегать внутренних разрывов. Есть специализированные значения для отдельных видов фрагментации; поддержка и результат зависят от контекста. Блок всё равно должен физически помещаться в доступное пространство.
Пример
<style>.column-notes{columns:2;column-gap:1rem}.column-notes section{break-inside:avoid;padding:.7rem;background:#edf6f0;margin-bottom:1rem}.column-notes h3{margin-top:0}</style>
<div class="column-notes"><section><h3>Разметка</h3><p>Свяжите подпись с полем.</p></section><section><h3>Стили</h3><p>Сохраните заметный контур фокуса.</p></section><section><h3>Проверка</h3><p>Увеличьте текст и повторите ввод.</p></section></div>Что должно получиться
Короткие заметки по возможности остаются целыми в колонках. Распределение свободного пространства может стать менее равномерным, поскольку удобство разрыва и балансировка взаимодействуют.
Граница применения и частая ошибка
Правило не обещает сохранить целиком блок длиннее листа или колонки. Запреты на слишком крупных контейнерах могут ухудшить печать. Не путайте фрагментацию текста с переносом строк и переносом flex-элементов.
Самостоятельная проверка
Сначала проверьте короткие блоки, затем добавьте длинный текст в один из них. Откройте печатный предпросмотр отдельно: экранная многоколоночная раскладка не доказывает, что PDF получит те же разрывы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.