Impresión CSS: ¿evitar los DIV de corte a la mitad entre páginas?

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

Los DIV que fabrica son de altura dinámica, pero no varían demasiado. Por lo general, son alrededor de 200 px. De todos modos, con alrededor de seiscientos de estos elementos por documento, me está costando mucho imprimirlo. A menos que tenga suerte, hay una entrada cortada por la mitad en la parte inferior y superior de cada página, y eso hace que el uso de impresiones sea muy difícil.

He intentado salto de página antes, salto de página después, salto de página dentro y combinaciones de los tres en vano. Creo que podría ser WebKit no representando correctamente las instrucciones, o tal vez es mi falta de comprensión de cómo usarlas. En cualquier caso, necesito ayuda. ¿Cómo puedo evitar cortar la mitad de mis DIV al imprimir?

Esto debería funcionar:

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

Tenga en cuenta el soporte actual del navegador (12-03-2014) :

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

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 salto de página dentro de la tabla para evitarlo.

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

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

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

salto de página dentro: evitar; definitivamente no funciona en webkit, de hecho ha sido un problema conocido por más de 5 años ahora https://bugs.webkit.org/show_bug.cgi?id=5097

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

El consejo que puedo darle es que, para lograr esta funcionalidad en FF, envuelva el contenido que no desea; nunca se rompe dentro de un DIV (o cualquier contenedor) con desbordamiento: automático (solo tenga cuidado de no causar barras de desplazamiento extrañas a mostrar dimensionando el contenedor demasiado pequeño).

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

Los valores posibles para salto de página después son: auto, always, avoid, left, right

Creo que no puede usar esta propiedad de salto de página después en elementos posicionados absolutamente.

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

Lo que funciona en todos los navegadores ppulares son los saltos de página forzados, por ejemplo, utilizando. salto de página después: siempre

Un escollo con el que me encontré fue un elemento padre que tenía el atributo 'desbordamiento' establecido en 'auto'. Esto niega los elementos div secundarios con el atributo de salto de página en la versión impresa. De lo contrario, page-break-inside: avoidfunciona bien en Chrome para mí.

En mi caso, logré solucionar las dificultades de salto de página en webkit estableciendo mis divs seleccionados en page-break-inside: evitar y también configurando todos los elementos para mostrar: en línea. Así como esto:

@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). Traté de aplicar solo display: en línea a 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 grandes contenedores que está arruinando las cosas.

Tal vez alguien podría ampliar esto.

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

Para todos los navegadores nuevos, esta solución funciona. Ver caniuse.com/#search=page-break-inside

page-break-inside: avoid;No parece funcionar siempre . Parece tener en cuenta la altura y el posicionamiento de los elementos del contenedor.

Por ejemplo, los inline-blockelementos que son más altos que la página se recortarán.

Pude restaurar la page-break-inside: avoid;funcionalidad de trabajo identificando un elemento contenedor display: inline-blocky agregando:

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

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

Espero que esto ayude a las personas que se quejan de que "el salto de página no funciona".