Stampa CSS: evitare DIV tagliati a metà tra le pagine?

Sto scrivendo un plug-in per un software che prende una grande raccolta di elementi e li inserisce in HTML in un WebView in Cocoa (che utilizza WebKit come renderer, quindi in pratica puoi supporre che questo file HTML venga aperto in Safari).

I DIV che produce sono di altezza dinamica, ma non variano troppo. Di solito sono circa 200 px. Ad ogni modo, con circa seicento di questi articoli per documento, sto attraversando un periodo davvero difficile per farlo stampare. A meno che non sia fortunato, c'è una voce tagliata a metà nella parte inferiore e superiore di ogni pagina, e ciò rende molto difficile l'utilizzo delle stampe.

Ho provato inversione di pagina, interruzione di pagina, interruzione di pagina e combinazioni dei tre senza risultati. Penso che WebKit potrebbe non rendere correttamente le istruzioni, o forse è la mia mancanza di comprensione su come usarle. In ogni caso, ho bisogno di aiuto. Come posso evitare il taglio della metà dei miei DIV durante la stampa?

Questo dovrebbe funzionare:

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

Si prega di notare l' attuale supporto del browser (12-03-2014) :

• Chrome - 1.0+
• Firefox (Gecko) - 19.0+
• Internet Explorer - 8.0+
• Opera - 7.0+
• Safari - 1.3+ (312)

Solo una soluzione parziale: L'unico modo in cui ho potuto farlo funzionare per IE è stato quello di avvolgere ogni div nella sua tabella e impostare l'interruzione di pagina sul tavolo per evitare.

page-break-inside: avoid; mi ha dato problemi usando wkhtmltopdf.

Per evitare interruzioni nel testo, aggiungi display: table;al CSS del div contenente il testo.

Spero che questo funzioni anche per te. Grazie JohnS.

interruzione di pagina: evitare; sicuramente non funziona in webkit, in effetti è stato un problema noto per 5+ anni ora https://bugs.webkit.org/show_bug.cgi?id=5097

Per quanto riguarda la mia ricerca, non esiste un metodo noto per raggiungere questo obiettivo (sto lavorando per capire il mio hack)

Il consiglio che posso darti è, per realizzare questa funzionalità in FF, avvolgere il contenuto che non desideri; non vuoi mai rompere mai dentro un DIV (o qualsiasi contenitore) con overflow: auto (fai solo attenzione a non causare strane barre di scorrimento a mostrarsi dimensionando il contenitore troppo piccolo).

Purtroppo, FF è l'unico browser in cui sono riuscito a farlo, e webkit è quello di cui sono più preoccupato.

I possibili valori per page-break-after sono: auto, always, avoid, left, right

Credo che non puoi usare la proprietà page-break-after su elementi assolutamente posizionati.

Ho lo stesso problema ma nessuna soluzione ancora. page-break-inside non funziona sui browser ma su Opera. Un'alternativa potrebbe essere quella di utilizzare il page-break-after: evitare; su tutti gli elementi figlio del div da tenere insieme ... ma nei miei test, l'attributo evitare non funziona ad es. in Firefox ...

Ciò che funziona in tutti i browser ppular sono le interruzioni di pagina forzate utilizzando ad es. page-break-after: sempre

Un errore che ho riscontrato è stato un elemento padre con l'attributo "overflow" impostato su "auto". Ciò nega gli elementi div figlio con l'attributo page-break-inside nella versione di stampa. Altrimenti, page-break-inside: avoidfunziona bene su Chrome per me.

Nel mio caso sono riuscito a risolvere le difficoltà di interruzione di pagina in webkit impostando i div selezionati su break di pagina: evitare, e anche impostando tutti gli elementi da visualizzare: inline. Quindi in questo modo:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

Sembra che le proprietà di interruzione di pagina possano essere applicate solo agli elementi incorporati (in webkit). Ho provato ad applicare solo la visualizzazione: in linea con gli elementi particolari di cui avevo bisogno, ma questo non ha funzionato. L'unica cosa che ha funzionato è stata l'applicazione in linea a tutti gli elementi. Immagino sia uno dei grandi div container che rovina le cose.

Forse qualcuno potrebbe espandersi su questo.

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

Per tutti i nuovi browser questa soluzione funziona. Vedi caniuse.com/#search=page-break-inside

page-break-inside: avoid;non sembra funzionare sempre . Sembra che tenga conto dell'altezza e del posizionamento degli elementi del contenitore.

Ad esempio, gli inline-blockelementi più alti della pagina verranno ritagliati.

Sono stato in grado di ripristinare la page-break-inside: avoid;funzionalità di lavoro identificando un elemento contenitore con display: inline-blocke aggiungendo:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

Spero che questo aiuti le persone che si lamentano che "l'interruzione di pagina non funziona".