Cómo evitar el salto de página al imprimir listas largas

Question

Estoy haciendo un poco de estilo para un folleto imprimible en el sitio de mi cliente, que podría contener listas largas de información desordenada.

Mi problema es que al imprimir en Firefox, toda <UL> se abrirá en una página nueva en lugar de dividirse en elementos secundarios <li>, lo que significa que no fluye con otro contenido de la página.

He encontrado que la propiedad CSS page-break-inside solo es compatible con Opera e IE8, ¿alguien sabe de una alternativa a esta propiedad u otro método que pueda usar para evitar que toda la lista se convierta en una página nueva?

¡Salud!

ACTUALIZACIÓN [23.11.2011]: que fue capaz de utilizar un trabajo alrededor de mi problema, ya que se genera el documento impreso en respuesta a la selección de un usuario por lo que esta página es sólo alguna vez va a ser impresa I (muy a regañadientes) empujó la semántica a un lado y eliminó el UL y reemplazó los LI con DIV, que se rompen correctamente. La pregunta aún se mantiene, para cualquier persona con un problema similar pero que usa el mismo HTML para imprimir la pantalla &.

Reproduzco el problema que estaba teniendo y publico el HTML necesario & CSS tan pronto como pueda.

Answer 1

Considere la posibilidad de eliminar mediante programación las etiquetas UL para la versión impresa. Debería poder obtener los elementos LI para mostrar lo mismo con un poco de estilo.

JavaScript o incluso jQuery puede manejar esto con la suficiente facilidad, pero apuesto a que usted podría encargarse de este lado del servidor.

Sé que no es HTML técnicamente válido, pero a veces hay que doblar las reglas cuando HTML/CSS no ofrece flexibilidad.

Answer 2

Para un poco mejor soporte de los navegadores podría utilizar este:

ul li { 
    page-break-after: avoid; 
    } 
ul li:first-child { 
    page-break-after: auto; 
    } 

deben trabajar en IE7 también. Pero no funcionará en Firefox. Los navegadores solo apestan cuando se trata de imprimir.

Answer 3

crédito va a david walsh blog

@media screen { 
    .page-break { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; } 
} 
@media print { 
    .page-break { height:0; page-break-before:always; margin:0; border-top:none; } 
}