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


199

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?


¡Proporcione un documento de muestra con el problema que está viendo y tal vez podamos ayudarlo!
X-Istence

Respondí una pregunta muy similar acerca de evitar cortar divs por la mitad aquí: stackoverflow.com/a/14348953/1026459
Travis J

1
Nota: Esta propiedad NO se puede usar en elementos posicionados absolutamente (y aparentemente también en bloques en línea).
Ujjwal Singh

Respuestas:


336

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)

77
Se debe trabajar. Pero no lo hace. Ver en.wikipedia.org/wiki/… para soporte del navegador.
Greg

1
Funciona en Safari 6 :), que ahora está en la vista previa del desarrollador
Linus Unnebäck

1
Funciona en Chrome V 27.0.1453.116
T. Brian Jones

44
Funciona en Netscape también. ¡Gracias!

2
¿Por qué necesitas medios impresos? ¿Es lo mismo si no se usa la impresión de medios y la regla se aplica directamente en div?
FrenkyB

21

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.


@easwee: gracias. El voto negativo ocurrió al mismo tiempo que inquisitive_web_developer ofreció una recompensa por la pregunta. Supongo que no le gustó. ;)
NotMe

3
¡Hermoso! Eres un campeón; He estado buscando una manera de hacer esto en wkhtmltopdf , que no es compatible page-break-inside: avoid;correctamente. Finalmente tengo una solución decente.
Dave

2
Probado salto de página en wkhtmltopdf en la versión 0.11 y funciona.
cmc

Probado con wkhtmltopdf 0.12.2.1. Las tablas internas de Div ya no son necesarias, solo ponga el salto de página dentro: evite en el selector de div. ¡Trabajos!
Paul Marti

12

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


Casi había renunciado a los espacios que parecían inexplicables aquí y allá cuando se utiliza page-break-before: always;en <div>elementos. Busqué en un océano de publicaciones SO, artículos, documentos oficiales y otras cosas. Nada ayudó. ¡Pero tú, mi amigo, finalmente viniste con lo que necesitaba exactamente! No puedo agradecer lo suficiente, hombre! ¡Ojalá pudiera conseguirte un café al menos, mucho amor de la India!
Jay Dadhania

6

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.


5

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.


1
Aparentemente tampoco funciona en inline-blocks
Ujjwal Singh

5

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


Esto debería funcionar con Webkit. Sin embargo, es posible que deba agregar algunos divs adicionales diseñados para imprimir con salto de página después: siempre; después de ~ media docena de tus divs regulares.
ʍǝɥʇɐɯ

3

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í.


2

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.


1
@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


1

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".

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.