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

Question

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

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

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

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

617 8

css cocoa printing page-break

8 ответов:

Comments

Ничего не найдено.

Dmitri Farkov · Accepted Answer · 2014-03-12 22:46:48

Это должно работать:
@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)

NotMe · Accepted Answer · 2010-09-01 22:48:38

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

Bjoern · Accepted Answer · 2010-01-27 12:45:27

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

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

Bonjowi · Accepted Answer · 2015-04-29 12:17:56

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

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

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

DOK · Accepted Answer · 2009-05-25 21:55:04

возможные значения для page-break-after:auto, always, avoid, left, right

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

Bob Monteverde · Accepted Answer · 2011-06-02 00:15:33

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

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

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

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

Eric D. · Accepted Answer · 2015-05-19 19:50:48

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

Waltur Buerk · Accepted Answer · 2015-04-10 13:22:17

в моем случае мне удалось исправить трудности с разрывом страницы в webkit, установив мои выбранные divs на page-break-inside: avoid, а также установив все элементы для отображения:inline. Вот так:
@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

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

может быть, кто-то мог об этом.