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

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

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

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

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

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

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

• Chrome - 1.0+
• Firefox (Gecko) - 19.0+
• Internet Explorer - 8.0+
• Опера - 7.0+
• Сафари - 1,3+ (312)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

page-break-inside: avoid;Кажется, не всегда работает. Кажется, принимать во внимание высоту и расположение элементов контейнера.

Например, inline-blockэлементы, которые выше страницы, будут обрезаны.

Мне удалось восстановить работоспособность page-break-inside: avoid;, идентифицировав элемент контейнера с помощью display: inline-blockи добавив:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

Надеюсь, что это помогает людям, которые жалуются, что «разрыв страницы не работает».