Saltos de página de impresión de Google Chrome
Estoy intentando que Google Chrome haga saltos de página.
Me han dicho a través de varios sitios web que page-break-after: always;es válido en Chrome, pero parece que no puedo hacerlo funcionar ni siquiera con un ejemplo muy simple. ¿Hay alguna forma de forzar un salto de página al imprimir en Chrome?
He utilizado el siguiente enfoque con éxito en todos los navegadores principales, incluido Chrome:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
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 seleccionada como aceptada (de Phil Ross)....
¡SÍ funciona en Chrome y la solución es realmente tonta !
Tanto el padre como el elemento sobre el cual 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 el salto de página dentro de Safari no funciona (al menos en 5.1.7)
¡¡¡espero que esto ayude!!!
PD: La siguiente pregunta planteó el hecho de que las versiones recientes de Chrome ya no respetan esto, incluso con la posición: relativa; truco. Sin embargo, parecen respetar:
-webkit-region-break-inside: avoid;
vea este violín: http://jsfiddle.net/petersphilo/QCvA5/23/show
así que supongo que tenemos que agregar eso ahora...
¡Espero que esto ayude!
