Печать CSS: избегайте половину DIV между страницами?

Я пишу плагин для части программного обеспечения, которая берет большую коллекцию элементов и выталкивает их в HTML в WebView в Cocoa (который использует WebKit как средство рендеринга, поэтому в основном вы можете предположить этот HTML-код файл открывается в Safari).

DIV, которые он делает, имеют динамическую высоту, но они не слишком сильно меняются. Они обычно около 200 пикселей. Во всяком случае, около шестисот из этих предметов на один документ, у меня очень тяжелое время, чтобы его распечатать. Если мне не повезет, там запись нарезается пополам внизу и сверху каждой страницы, и это очень затрудняет использование распечаток.

Я пробовал перерыв страницы перед, перерыв страницы, перерыв страницы и комбинации из трех безрезультатно. Я думаю, что это может быть WebKit, не правильно отображающий инструкции, или, может быть, мое отсутствие понимания того, как их использовать. Во всяком случае, мне нужна помощь. Как я могу предотвратить половину моих DIV при печати?

Ответ 1

Это должно работать:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Обратите внимание на текущую поддержку браузера (12-03-2014):

Chrome - 1.0 +
Firefox (Gecko) - 19.0 +
Internet Explorer - 8.0 +
Opera - 7.0 +
Safari - 1.3+ (312)

Ответ 2

Только частичное решение: единственный способ заставить это работать для IE - это обернуть каждый div в свою собственную таблицу и не допускать, чтобы страница была разбита на таблицу.

Ответ 3

page-break-inside: avoid; дал мне проблемы с использованием wkhtmltopdf.

Чтобы избежать перерывов в тексте, добавьте display: table; в CSS содержащего текст div.

Надеюсь, это сработает и для вас. Спасибо JohnS.

Ответ 4

Возможные значения для разрыва страницы: auto, always, avoid, left, right

Я считаю, что вы не можете использовать свойство page-break-after на абсолютно позиционированных элементах.

Ответ 5

У меня такая же проблема, пока нет решения. page-break-inside не работает в браузерах, кроме Opera. Альтернативой может быть использование break-after: avoid; на всех дочерних элементах div, чтобы сохранить togehter... но в моих тестах атрибут avoid-Attribute не работает, например. в Firefox...

Что работает во всех ppular-браузерах, это принудительные разрывы страниц, используя, например. page-break-after: always

Ответ 6

page-break-inside: избегать; определенно не работает в webkit, на самом деле это известная проблема в течение 5 лет https://bugs.webkit.org/show_bug.cgi?id=5097

Что касается моих исследований, то нет известного метода для этого (я работаю над выяснением своего собственного взлома)

Совет, который я могу вам дать, заключается в том, чтобы выполнить эту функциональность в FF, обернуть контент, который вы надеваете; t хотеть разбивать когда-либо внутри DIV (или любого контейнера) с переполнением: auto (просто будьте осторожны, чтобы не вызвать странные полосы прокрутки, чтобы отобразиться, если размер контейнера слишком мал).

К сожалению, FF - единственный браузер, которому мне удалось это сделать, и webkit - это тот, о котором я больше беспокоюсь.

Ответ 7

Одна ошибка, с которой я столкнулся, была родительским элементом, у которого атрибут "переполнения" установлен на "авто". Это отрицает дочерние элементы div с атрибутом разрыва страницы в печатной версии. В противном случае page-break-inside: avoid отлично работает на Chrome для меня.

Ответ 8

В моем случае мне удалось исправить трудности с разрывом страницы в webkit, установив мои выбранные divs на разрыв страницы: избегайте, а также устанавливая все элементы для отображения: inline. Так вот так:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

Похоже, что свойства разбиения на страницы могут применяться только к встроенным элементам (в webkit). Я попытался применить только display: inline к конкретным элементам, которые мне нужны, но это не сработало. Единственное, что сработало, - это применять встроенные элементы ко всем элементам. Я предполагаю, что это один из больших контейнеров div, которые путают вещи.

Возможно, кто-то может расширить это.

Ответ 9

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

Для всех новых браузеров это решение работает. См. Caniuse.com/#search=page-break-inside