página - salto de pagina css imprimir

Impresión CSS: ¿Evita las DIV cortadas por la mitad entre páginas?

Question

Estoy escribiendo un complemento para una pieza de software que toma una gran colección de elementos y los muestra en HTML en una WebView en Cocoa (que usa WebKit como procesador, así que básicamente puede suponer que este archivo HTML se está abriendo en Safari).

Los DIV que hace son de altura dinámica, pero no varían demasiado. Por lo general, son alrededor de 200px. De todos modos, con alrededor de seiscientos de estos artículos por documento, estoy teniendo un momento realmente difícil para imprimirlo. A menos que tenga suerte, hay una entrada cortada a la mitad en la parte inferior y superior de cada página, y eso hace que el uso de las impresiones sea muy difícil.

He intentado page-break-before, page-break-after, page-break-inside, y combinaciones de los tres en vano. Creo que podría ser que WebKit no haya entregado las instrucciones correctamente, o tal vez sea mi falta de comprensión sobre cómo usarlas. En cualquier caso, necesito ayuda. ¿Cómo puedo evitar el corte en la mitad de mis DIV al imprimir?

Answer 1

En mi caso, logré solucionar las dificultades de salto de página en webkit al configurar mis divs seleccionados en page-break-inside: avoid, y también estableciendo todos los elementos para visualizar: inline. Así que así:

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

Parece que las propiedades de salto de página solo se pueden aplicar a elementos en línea (en webkit). Intenté solo aplicar la pantalla: en línea con los elementos particulares que necesitaba, pero esto no funcionó. Lo único que funcionó fue aplicar en línea a todos los elementos. Supongo que es uno de los contenedores div grandes que están estropeando las cosas.

Quizás alguien podría ampliar esto.

Answer 2

Esto debería funcionar:

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

Tenga en cuenta la compatibilidad actual del navegador (12-03-2014) :

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

Answer 3

Los valores posibles para page-break-after son: auto, always, avoid, left, right

Creo que no puede usar esta propiedad de salto de página en elementos posicionados de manera absoluta.

Answer 4

Solo una solución parcial: la única forma en que podía hacer que esto funcionara para IE era envolver cada div en su propia tabla y establecer el page-break-inside en la tabla para evitarlo.

Answer 5

Tengo el mismo problema pero todavía no hay solución. page-break-inside no funciona en los navegadores, pero Opera. Una alternativa podría ser utilizar page-break-after: avoid; en todos los elementos secundarios del div para mantener juntos ... pero en mis pruebas, el atributo de evitar no funciona, por ejemplo. en Firefox ...

Lo que funciona en todos los navegadores ppulares son los saltos de página forzados usando, por ejemplo. page-break-after: siempre

Answer 6

Una de las trampas con las que me topé fue un elemento padre con el atributo ''overflow'' establecido en ''auto''. Esto niega los elementos div hijos con el atributo page-break-inside en la versión impresa. De lo contrario, page-break-inside: avoid funciona bien en Chrome para mí.

Answer 7

page-break-inside: evitar; definitivamente no funciona en webkit, de hecho ha sido un problema conocido desde hace más de 5 años https://bugs.webkit.org/show_bug.cgi?id=5097

En lo que respecta a mi investigación, no hay un método conocido para lograr esto (estoy trabajando en descubrir mi propio truco)

El consejo que puedo darle es, para lograr esta funcionalidad en FF, envolver el contenido que no desea romper dentro de un DIV (o cualquier contenedor) con desbordamiento: automático (solo tenga cuidado de no causar extrañas barras de desplazamiento a aparecen al dimensionar el contenedor demasiado pequeño).

Lamentablemente, FF es el único navegador en el que logré lograr esto, y el webkit es el que más me preocupa.

Answer 8

page-break-inside: avoid; me dio problemas para usar wkhtmltopdf.

Para evitar interrupciones en el texto, agregue display: table; al CSS del div que contiene texto

Espero que esto funcione para ti también. Gracias JohnS.