TLDR: Разрывы страниц плохо поддерживаются браузерами (вероятно, по уважительной причине), поэтому разработчик страниц должен решить эту проблему. В остальном вы мало что можете сделать, кроме копирования его в документ, возможно. И C-Net соглашается.
Разрывы страниц
Поскольку «поля печати» не находятся под вашим контролем как веб-автора, вы не можете гарантировать, сколько веб-документов будет напечатано на каждой странице и, следовательно, где будут разрывы страниц. Это будет зависеть от браузера пользователя, настроек браузера и принтера. И основной размер шрифта пользователя и размер канцелярских принадлежностей также находятся вне вашего контроля. Вы захотите использовать CSS, чтобы влиять (не контролировать) положение разрывов страниц. CSS2.1 Глава 13 Постраничные носители является важным чтением. Обратите внимание, что в этой главе CSS2.1 отбрасывает некоторые функции в CSS2, которые браузеры никогда не реализовывали.
Поддержка свойств разрыва страницы (например, разрыва страницы) является плохой, даже в последних браузерах, за исключением Opera (Opera 5 и более поздних версий), поддержка которой очень хорошая:
Хуже того, браузеры могут разбивать страницы в явно недопустимых местах (см. Также следующий абзац). Например, я нашел случаи, когда браузеры разбивали изображение по страницам. Тестирование на моих различных сайтах показывает, что обработка разрывов страниц в Opera, хотя и не идеальная, явно более надежна, чем в Firefox или IE.
В статье Эрика (см. Ниже) упоминается ошибка в браузерах на основе Gecko (Mozilla), связанная с печатью плавающих элементов. Эта ошибка, видимо, еще должна быть исправлена [на июль 2009 года], в результате чего всплывающие элементы обрезаются в конце печатной страницы, а иногда и только на одной странице печатаемого документа [Примечание 2]. Я обнаружил похожую проблему с плавающей точкой в старых версиях Opera (например, O7.21). В IE была обнаружена другая ошибка, когда, если верхняя часть плавающего элемента совпадает с разрывом страницы, плавающий элемент вообще не печатается [ССЛЕДОВАНИЕ: Реннан Рике].
Предлагаемая стратегия для разрывов страниц
Лучшая политика (конечно, пока браузеры не улучшатся) - дать им перерыв (ха!), Предоставив им как можно больше свободы действий при выборе точек останова. У них есть особые проблемы с соседними элементами, такими как позиционированные <div>s; поплавки; и таблицы с двумя или более столбцами. Таким образом, подходящие стратегии включают в себя создание <div>статического положения; плавучие поплавки; и разбиение таблиц, используемых для разметки, на серию более коротких таблиц [Примечание 1]. Несмотря на то, что свойства разрыва страницы плохо поддерживаются, не ограничивайте браузеры слишком сильно: используйте значение «избежать» как можно более легким касанием.
Браузеры действительно не любят поплавки, когда дело доходит до печати (см. Предыдущий раздел). Обходной путь - отсоединить плавающие элементы (float: none и, возможно, width: auto). Если вы рискуете иметь плавающий элемент при печати, он может печататься через разрыв страницы (верхняя часть плавающего элемента привязана к текущей строке). В зависимости от природы всплывающего материала это может быть приемлемым поведением. Если нет, только Opera позволит вам подавить такой раскол.
Если вам нужно, чтобы какой-то контент был напечатан только на одной странице, например, на форме, ваш лучший шанс - сделать его значительно длиннее одной страницы, чтобы у вас был хороший запас ошибок. Что касается размера канцелярских товаров, вы можете выбрать международный (ISO) размер A4 (для международной аудитории) или US Letter (для исключительно американской аудитории), хотя нет никакой гарантии, какой размер используют пользователи. Но спросите себя, как бы вы ответили, если бы вы создали одностраничную форму с помощью текстового редактора, а пользователь с ослабленным зрением запросил версию для большого шрифта. Как всегда с веб-дизайном и CSS, жизнь будет намного проще, если вы не попытаетесь бороться с пользователем, настаивая на совершенстве пикселей или гарантированном разрыве страниц. Жидкий дизайн применяется как на бумаге, так и на экране.