Capisco che l'istruzione CSS page-break-inside:avoid preveda un'interruzione di pagina all'interno di un div quando viene stampato un documento HTML. Attraverso la ricerca su Internet, ho trovato che è supportato solo da Opera e IE8. C'è un lavoro in giro che mi permette di evitare interruzioni di pagina in Firefox (3.6) o versioni di IE meno di 8?page-break-inside: evitare equivalenti per Firefox e/o IE
Come circa appena corrispondenza tutti gli elementi all'interno del vostro elemento, tranne le prime, e li hanno senza break-before
#yourelement *+*{
page-break-before: avoid;
}
La domanda riguarda la compatibilità FF e IE vecchio, non come utilizzare la proprietà css. – aaaidan
Nota che sto usando page-break-before, non page-break-inside che non è supportato, ecco perché devi usare questo strano selettore per ottenere lo stesso effetto. In secondo luogo questo post ha quasi 6 mesi. – Gerben
Questo non funzionerà per ≤IE7 e Firefox [non supporta] (https://bugzilla.mozilla.org/show_bug.cgi?id=132035) 'avoid' neanche. – Knu
Siamo spiacenti, la mia risposta è "non è possibile", anche se mi piacerebbe se chiunque può dimostrarmi sbagliato.
Ho incontrato lo stesso problema ultimamente, e dopo aver fatto un po 'di ricerca ho deciso di andare solo con
page-break-after: always;
dopo ogni diversi numero di elementi.
Aggiungo che apparentemente non è ancora implementato in Firefox 54 – Wolf
Provate ad usare white-space:nowrap invece. Questo dovrebbe impedire al testo di penetrare all'interno dell'elemento, almeno mentre è visualizzato sullo schermo. Non sono sicuro di come si traduca in stampa, ma vale la pena provare.
Maggiori informazioni: http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm
Per tutto ciò che non è Firefox,
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
funzionerà. Ma non per Firefox. In Firefox, ciò che devi fare è controllare l'altezza e quindi aggiungere page-break-after: always; quando è rilevante.
In media, il margine sarà 1 pollice in alto e in basso. Così, per misurare il numero di pixel di una pagina da 10 pollici consumerebbe, ho usato questo:
var pageOfPixels;
(function(){
var d = document.createElement("div");
d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;");
document.body.appendChild(d);
pageOfPixels = $(d).height();
d.parentNode.removeChild(d);
})();
ho avuto un sacco di div ciascuno con un sacco di punti in loro. Quindi, quello che ho fatto è stato l'iterazione attraverso di essi, e poi ho confrontato l'altezza corrente di essi nella pagina corrente con il valore pageOfPixels.
var currentPosition = 0;
$('.printDiv').each(function (index, element) {
var h = $(this).height();
if (currentPosition + h > pageOfPixels) {
//add page break
$('.printDiv').eq(index - 1).css("page-break-after", "always");
currentPosition = h;
} else {
currentPosition += h;
}
});
Questo ha funzionato per me in Firefox.
Siamo spiacenti, nessuna soluzione, ma funziona per me in Mac OS Firefox 3.6.10 ma si blocca su Mac OS Opera 10.62, non funziona in Safari. – daustin777