Page-break-inside: evitare di non funzionare

Question

Ho un foglio di stile di stampa per il mio sito (Wordpress) e voglio che le immagini vengano stampate su una singola pagina anziché essere suddivise tra le pagine. In alcuni casi, anche le righe di testo vengono suddivise tra le pagine. Ho incluso img {page-break: avoid;) nel mio foglio di stile di stampa, ma senza fortuna. Ho trovato alcune risposte precedenti ma sono un po 'vecchie.

Esiste un modo affidabile per stampare un'immagine di dimensioni medie su una singola pagina anziché dividerla su più pagine? Perché le righe di testo si rompono tra le pagine?

sito: http://74.220.217.211/housing-developments/grafton-townhomes/

Related posts:

• Print styles: How to ensure image doesn't span a page break

• What are most useful media="print" specfic ,cross browser compatible css properties?

• What is the correct way to do the CSS to avoid page breaks?

• page-break-inside doesn't work in Chrome?
• Work around for page-break-inside:avoid

Answer 1

Prova questo:

.site-container, .site-inner (heck body tag possibly) {position:relative;} 

p { 
    page-break-inside: avoid; 
    position: relative; 
} 

Scegli questa FIDDLE

Aggiungere che nei vostri supporti di stampa

Ho appena Commenta questo in Chrome e si guarda bene meno l'immagine, che ha anche bisogno di questo:

img { 
    page-break-before: auto; 
    page-break-after: auto; 
    page-break-inside: avoid; 
    display: block; 
} 

Infine Wordpress ha questo, ma in realtà non è sicuro se aiuta ...

<!--nextpage--> 

Answer 2

Penso che il problema potrebbe provenire dalla proprietà degli elementi position. L'elemento non si vuole rompere a fine pagina e il suo genitore deve essere dichiarato come:

position: relative; 

Il resto degli stili di codice è giusto e dovrebbe apparire come

@media print { 
    img { 
     page-break-before: auto; 
     page-break-after: auto; 
     page-break-inside: avoid; 
     position: relative; 
    } 
}