Я пишу плагин для части программного обеспечения, которая берет большую коллекцию элементов и выталкивает их в HTML в WebView в Cocoa (который использует WebKit как средство рендеринга, поэтому в основном вы можете предположить этот HTML-код файл открывается в Safari).
DIV, которые он делает, имеют динамическую высоту, но они не слишком сильно меняются. Они обычно около 200 пикселей. Во всяком случае, около шестисот из этих предметов на один документ, у меня очень тяжелое время, чтобы его распечатать. Если мне не повезет, там запись нарезается пополам внизу и сверху каждой страницы, и это очень затрудняет использование распечаток.
Я пробовал перерыв страницы перед, перерыв страницы, перерыв страницы и комбинации из трех безрезультатно. Я думаю, что это может быть WebKit, не правильно отображающий инструкции, или, может быть, мое отсутствие понимания того, как их использовать. Во всяком случае, мне нужна помощь. Как я могу предотвратить половину моих DIV при печати?
Это должно работать:
@media print
{
div{
page-break-inside: avoid;
}
}
Обратите внимание на текущую поддержку браузера (12-03-2014):
Только частичное решение: единственный способ заставить это работать для IE - это обернуть каждый div в свою собственную таблицу и не допускать, чтобы страница была разбита на таблицу.
page-break-inside: avoid; дал мне проблемы с использованием wkhtmltopdf.
Чтобы избежать перерывов в тексте, добавьте display: table; в CSS содержащего текст div.
Надеюсь, это сработает и для вас. Спасибо JohnS.
Возможные значения для разрыва страницы: auto, always, avoid, left, right
Я считаю, что вы не можете использовать свойство page-break-after на абсолютно позиционированных элементах.
У меня такая же проблема, пока нет решения. page-break-inside не работает в браузерах, кроме Opera. Альтернативой может быть использование break-after: avoid; на всех дочерних элементах div, чтобы сохранить togehter... но в моих тестах атрибут avoid-Attribute не работает, например. в Firefox...
Что работает во всех ppular-браузерах, это принудительные разрывы страниц, используя, например. page-break-after: always
page-break-inside: избегать; определенно не работает в webkit, на самом деле это известная проблема в течение 5 лет https://bugs.webkit.org/show_bug.cgi?id=5097
Что касается моих исследований, то нет известного метода для этого (я работаю над выяснением своего собственного взлома)
Совет, который я могу вам дать, заключается в том, чтобы выполнить эту функциональность в FF, обернуть контент, который вы надеваете; t хотеть разбивать когда-либо внутри DIV (или любого контейнера) с переполнением: auto (просто будьте осторожны, чтобы не вызвать странные полосы прокрутки, чтобы отобразиться, если размер контейнера слишком мал).
К сожалению, FF - единственный браузер, которому мне удалось это сделать, и webkit - это тот, о котором я больше беспокоюсь.
Одна ошибка, с которой я столкнулся, была родительским элементом, у которого атрибут "переполнения" установлен на "авто". Это отрицает дочерние элементы div с атрибутом разрыва страницы в печатной версии. В противном случае page-break-inside: avoid отлично работает на Chrome для меня.
В моем случае мне удалось исправить трудности с разрывом страницы в webkit, установив мои выбранные divs на разрыв страницы: избегайте, а также устанавливая все элементы для отображения: inline. Так вот так:
@media print{
* {
display:inline;
}
script, style {
display:none;
}
div {
page-break-inside:avoid;
}
}
Похоже, что свойства разбиения на страницы могут применяться только к встроенным элементам (в webkit). Я попытался применить только display: inline к конкретным элементам, которые мне нужны, но это не сработало. Единственное, что сработало, - это применять встроенные элементы ко всем элементам. Я предполагаю, что это один из больших контейнеров div, которые путают вещи.
Возможно, кто-то может расширить это.
@media print{
/* use your css selector */
div{
page-break-inside: avoid;
}
}
Для всех новых браузеров это решение работает. См. Caniuse.com/#search=page-break-inside