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

Question

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

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

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

Answer 1

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

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

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

• Хром - 1,0 +
• Firefox (Gecko) - 19,0 +
• Internet Explorer - 8,0 +
• Опера - 7,0 +
• Safari - 1,3+ (312)

Answer 2

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

Answer 3

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

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

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

Answer 4

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

То, что работает во всех ppular браузерах, - это принудительные разрывы страниц с использованием, например. разрыв страницы: всегда

Answer 5

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

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

Answer 6

разрыв страницы: избегать; определенно не работает в webkit, на самом деле это известная проблема уже более 5 лет https://bugs.webkit.org/show_bug.cgi?id=5097

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

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

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

Answer 7

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

Answer 8

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

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

}

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

Может быть, кто-то мог бы расширить это.

Answer 9

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

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