Друк CSS: уникати розрізнених DIV-сторінок між сторінками?

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

DIV, які він робить, мають динамічну висоту, але вони не дуже варіюються. Вони зазвичай близько 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.

Я сподіваюся, що це працює і для вас. Спасибі Джонс.

розбиття сторінки: уникати; Однозначно не працює у веб-програмі, насправді це відома проблема вже 5 років https://bugs.webkit.org/show_bug.cgi?id=5097

Наскільки моє дослідження пішло, не існує відомого методу для досягнення цього (я працюю над з'ясуванням власного хаку)

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

На жаль, FF - це єдиний браузер, якому мені вдалося це виконати, а веб-кет - це той, про кого я більше переживаю.

Можливі значення для розбиття сторінки: auto, always, avoid, left, right

Я вважаю, що ви не можете використовувати властивість розбиття сторінки на абсолютно розміщених елементах.

У мене ж проблема ще немає рішення. Розбиття сторінок працює не в браузерах, а в Opera. Альтернативою може бути використання переривання сторінки: уникати; на всіх дочірніх елементах div, щоб зберегти тогетер ... але в моїх тестах, Avoid-Atribut не працює, наприклад. у Firefox ...

Що працює у всіх популярних браузерах, це вимушені розриви сторінок за допомогою напр. перерив сторінки після: завжди

Одне підводне каміння, на яке я зіткнувся, був батьківським елементом, у якого атрибут 'overflow' встановлений на 'auto'. Це заперечує дочірні елементи div з атрибутом прориву сторінки у версії для друку. В іншому випадку page-break-inside: avoidдля мене відмінно працює Chrome.

У моєму випадку мені вдалося виправити труднощі з розривом сторінки у веб-програмі, встановивши вибрані вами диви на прорив сторінки: уникнути, а також встановивши всі елементи для відображення: inline. Так ось так:

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

}

Здається, властивості розбиття сторінки можуть застосовуватися лише до вбудованих елементів (у веб-програмі). Я намагався застосувати лише display: inline до потрібних мені елементів, але це не вийшло. Єдине, що працювало - це застосувати inline до всіх елементів. Я здогадуюсь, це один з великих контейнерів, які псують речі.

Можливо, хтось міг би розширитись з цього приводу.

@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; }
}

Сподіваюсь, це допомагає людям, які скаржаться на те, що "прорив сторінки не працює".