texto - parrafos en html ejemplos

Evite que un elemento HTML abarque varias páginas cuando se imprime

Question

Tengo el siguiente código HTML que me gustaría evitar que se rompa al abarcar varias páginas. El problema es que si uso el salto de página antes o después, pondrá cada elemento en su propia página. El otro problema que tengo es que si configuro display: block en la clase CSS de la cell o en la clase de ajuste, el DIV o el LI aún se rompen. Tengo un archivo CSS de medios impresos y un archivo CSS para la pantalla también. Quiero evitar que el elemento <li class="cell"> y su contenido se rompan.

        <div class="pad">
        <h1 style="text-align: center; margin: 10px 0">

            Work Orders for Jan 05, 2011
        </h1>
        <p class="printHidden">
            <a href="/orders/print-all/date/2011-01-05">Print All Work Orders</a>
        </p>
        <ul class="workorders">                    
            <li class="cell">
                <div class="wrap" id="146">

                    <div class="scheduled">
                        <p>
                            <strong>Work Order:</strong> <a href="/orders/view/work-order/146">158801</a>
                        </p>
                        <p>
                            <strong>Client:</strong> Client Name
                        </p><br>

                        <b>Resources</b>
                        <ul>
                            <li>
                                <a href="/resources/view/resource-id/5" id="Person-5">Mikell McLaindon</a>
                            </li>
                            <li>
                                <a href="/resources/view/resource-id/9" id="Person-9">Jose Copper</a>

                            </li>
                        </ul>
                    </div>
                    <div class="unschedule printHidden">
                        <h1 style="text-align: center; margin: 10px 0 10px; font-size: 12px; font-weight: bold;">
                            Unschedule Resource for 15880-PW
                        </h1>
                    </div>
                </div>
            </li>
            {... removed for brevity ...}

Answer 1

EDITAR: SOLUCIÓN ADECUADA

Consulte: http://www.w3schools.com/css/pr_print_pagebi.asp Así que si agrega lo siguiente a su CSS, debería solucionar su problema:

@media print
{
    div.pad { page-break-inside:avoid; }
}

Todos los principales navegadores de escritorio ahora soportan esto.

Sin embargo, también hay page-break-after:avoid y page-break-before:avoid lo que puede agregar a cada elemento dentro de la clase .pad para producir el mismo resultado en algunas versiones anteriores de los navegadores.

@media print
{
    div.pad * { 
        page-break-after:avoid;
        page-break-before:avoid;
    }
}

http://www.w3schools.com/Css/pr_print_pagebb.asp

http://www.w3schools.com/css/pr_print_pageba.asp

ANTIGUA RESPUESTA:

Parece que estás tratando de encajar algo en una página que no encaja en una página. Intentaría agregar una hoja de estilo con media="print" ...

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />

... que reduce el tamaño de fuente, el relleno, etc. de todos estos elementos para que PUEDES colocar un salto de página antes de esta sección y hacer que encaje en la página.