Pregunta page-break-inside no funciona en Chrome?


Tengo un montón de párrafos en una página:

<p> ... </p>
<p> ... </p>
<p> ... </p>

La regla de CSS para esos párrafos es:

p {
    margin: 20px 0;
    page-break-inside: avoid;
}

Demo en vivo:  http://jsfiddle.net/KE9je/2/show/

Si entiendo el page-break-inside propiedad correctamente, lo anterior debe garantizar que ningún párrafo se divide entre dos páginas. (Un párrafo se muestra en la página "actual", o si no se ajusta completamente, se mueve a la página siguiente).

Esto no parece funcionar en Chrome. Abra la demostración, haga clic derecho en la página, elija "Imprimir ...". Verá una vista previa de impresión; el quinto párrafo se divide entre la página 1 y 2.

¿Qué estoy haciendo mal? ¿Cómo puedo hacer que esto funcione en Chrome?



32
2017-10-09 20:57


origen


Respuestas:


En realidad, HACE trabajar en Chrome, y la solución es realmente tonto!!

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

position: relative;

Mira esto violín (o en pantalla completa)

Esto es cierto para:

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

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

¡¡¡Espero que esto ayude!!!


31
2017-09-12 10:54



Según SitePoint, Chrome no es compatible aquí, solo Opera (y IE 8 buggy) ...

http://reference.sitepoint.com/css/page-break-inside

Otras referencias:

http://www.webdevout.net

http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/

Hilos de desbordamiento de pila:

Soporte para navegadores cruzados de `page-break-inside: avoid;`

"page-break-inside: avoid" - no funciona

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

¿Qué navegadores soportan la manipulación de salto de página usando CSS y el elemento page-break-inside?

Foro de Google Chrome:

http://www.google.com/support/forum

No publicaré el enlace de W3Schools (debido a la falta de fiabilidad general) pero también afirman que solo se admite en Opera, por lo que sea que valga la pena.


3
2017-10-09 21:05



Sé que esta es una vieja pregunta, pero Chrome ha cambiado desde que fue respondida originalmente y esto puede ayudar.

Parece que page-break-inside:avoid funciona en Chrome en función de la altura del elemento, por lo que si está flotando un grupo de elementos en un div, page-break-inside:avoid no trabajará.

Es posible evitar esto definiendo explícitamente la altura del elemento que no desea dividir. Ejemplo de jQuery:

$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());

2
2017-09-17 23:41



Acabo de probar esto con un párrafo más grande en IE9, Chrome 14 y Firefox 7, y parece que solo IE9 funciona como se esperaba. Es posible que deba recurrir a agregar saltos de página manualmente donde los desee.

page-break-after:always

Por supuesto, eso es bueno para ti si conoces la longitud del contenido por adelantado.


1
2017-10-09 21:36



Funciona para mí, así:

.print{position: absolute;}
.print p{page-break-inside: avoid}

0
2017-07-01 19:28



He estado luchando con esto por un tiempo y, además de seguir los consejos en las otras respuestas, tuve que asegurarme de que el elemento y todos los elementos padres tenía el estilo Display: block;.


0
2017-08-22 11:22



Lo que funcionó para mí (tanto en FFox y Chrome, eso es)

.container {
  column-gap: .4em;
  columns: 3;
  padding: .4em;
}

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

Y eso es ; No necesitaba position.


0
2018-03-07 02:02