Saltos de página de impresión de Google Chrome

Intento que Google Chrome haga saltos de página.

Me han contado a través de un grupo de sitios web que la page-break-after: always; es válido en Chrome, pero parece que no puedo hacerlo funcionar incluso con un ejemplo muy simple. ¿Hay alguna forma de forzar un salto de página al imprimir en cromo?

He utilizado el siguiente enfoque con éxito en todos los principales navegadores, incluido Chrome:

     Paginated HTML    

This is Page 1

This is Page 2

This is Page 3

Este es un ejemplo simplificado. En el código real, cada div de página contiene muchos más elementos.

En realidad, falta un detalle en la respuesta que se selecciona como aceptada (de Phil Ross) …

¡ FUNCIONA en Chrome, y la solución es realmente tonta !

Tanto el elemento principal como el elemento en el que desea controlar el salto de página deben declararse como:

 position: relative 

mira este violín: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Esto es cierto para:

 page-break-before page-break-after page-break-inside 

Sin embargo, controlar page-break-inside en Safari no funciona (en 5.1.7, al menos)

¡¡¡espero que esto ayude!!!

PD: la siguiente pregunta sacó a relucir el hecho de que las versiones recientes de Chrome ya no lo respetan, incluso con el puesto: relativo; truco. Sin embargo, parecen respetar:

 -webkit-region-break-inside: avoid; 

ver este violín: http://jsfiddle.net/petersphilo/QCvA5/23/show

así que supongo que tenemos que agregar eso ahora …

¡Espero que esto ayude!

Solo quería apuntar aquí que Chrome también ignora la configuración page-break- * css en los divs que se han flotado.

Sospecho que hay una buena justificación para esto en algún lugar de la especificación CSS, pero pensé que podría ayudar a alguien algún día 😉

Solo otra nota: IE7 no puede reconocer la configuración de salto de página sin una altura explícita en el elemento de bloque anterior:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

Tengo este problema yo mismo (mi página se rompe en todos los navegadores excepto Chrome) y pude aislarlo hasta el elemento de ruptura de página dentro de una celda de tabla. (Plantillas antiguas heredadas en el CMS).

Aparentemente, Chrome no respeta las propiedades de salto de página antes o después de la página dentro de las celdas de la tabla, por lo que esta versión modificada del ejemplo de Phil pone el segundo y tercer titular en la misma página:

     Paginated HTML    

This is Page 1

This is Page 2

This is, sadly, still Page 2

La implementación de Chrome está (dudosamente) permitida dada la especificación CSS. Puedes ver más aquí: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=es

Tuve un problema similar a esto, pero finalmente encontré la solución. Tuve overflow-x: oculto; aplicado a la etiqueta , así que no importa lo que hice a continuación en el DOM, nunca permitiría saltos de página. Al volver a overflow-x: visible; funcionó bien

Espero que esto ayude a alguien por ahí.

Cuidado con CSS: display:inline-block en display:inline-block al imprimir.

Ninguna de las propiedades de CCS para ir a la página siguiente funcionaría para mí en Chrome y Firefox si mi tabla estuviera dentro de un div con la display:inline-block estilo display:inline-block

Por ejemplo, lo siguiente no funciona:

 
...
...

Pero el siguiente trabajo:

 
...
...

Me enfrenté a este problema en cromo antes y la causa es que había un div que tiene min-height establecido en un valor. La solución fue restablecer la altura mínima al imprimir de la siguiente manera:

 @media print { .wizard-content{ min-height: 0; } } 

Actualización 2016:

Bueno, tengo este problema, cuando tuve

 overflow:hidden 

en mi div.

Después de que hice

 @media print { div { overflow:initial !important } } 

todo se volvió perfecto y perfecto

Parece que esto se ha discutido recientemente (febrero de 2014) (en un boleto de error de 2005) en el rastreador de errores webkit

https://bugs.webkit.org/show_bug.cgi?id=5097

Si usa Chrome con Bootstrap Css, las clases que controlan el diseño de la cuadrícula, por ejemplo, col-xs-12, etc. utilizan “float: left” que, como han señalado otros, arruina los saltos de página. Quítelos de su página para imprimir. Funcionó para mí (En la versión de Chrome = 49.0.2623.87)

Tiene ese problema Transcurre tanto tiempo … Sin campos laterales de página, se rompe normal, pero cuando aparecen campos, la página y el “espacio de salto de página” se escalarán. Entonces, con un campo normal, dentro de un documento, se mostró incorrecto. Lo arreglo con un set

  width:100% 

y use

 div.page { page-break-before: always; page-break-inside: avoid; } 

Úselo en primera línea.

Por lo que sé, la única forma de obtener los saltos de página correctos en las tablas con Google Chrome es dándola al elemento

la pantalla de propiedades : inline-table (o display: inline-block pero se ajusta mejor en otros casos que no son tablas). También se deben utilizar las propiedades “page-break-after: always; page-break-inside: avoid;” como fue escrito por @Phil Ross

  ... 

Me funcionaba cuando usaba relleno como:

 
My content