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
risposta
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.
- 1. larghezza massima: -webkit-fit-content ie 8 equivalenti?
- 2. stampa background-color in Firefox e IE
- 3. getComputedStyle() e cssText in IE e Firefox
- 4. IE commenti condizionali e Chrome/Firefox
- 5. Browser (Webkit, IE, Firefox) Cambia sfondo per selezionare
- 6. click link selenium web driver funziona per ie non firefox
- 7. Come cambiare WebBrowser da IE a Firefox
- 8. Maven equivalenti per python
- 9. Random Querystring per evitare la memorizzazione nella cache di IE
- 10. Evitare di trasformazione di testo per Link IE modalità contentEditable
- 11. Come posso evitare di causare perdite di memoria in Firefox?
- 12. Chart.js equivalenti per React Native
- 13. CueText equivalenti per un TMemo
- 14. Dimensioni C equivalenti per macro
- 15. Content-disposition ignorata in IE 9 e Firefox 13
- 16. CSS non funziona in IE o Firefox - Chrome funziona bene
- 17. -webkit-box-reflect in firefox e IE - CSS
- 18. selectedOptions [0] .textContent; non funziona in IE o Firefox
- 19. Font Awesome non funziona in Firefox e IE
- 20. evento "onchange" ritardato in IE? (ok con Firefox)
- 21. Colonna Flex-reverse e overflow in Firefox/IE
- 22. SWFUpload funziona in IE, ma non in Firefox
- 23. CSS: Immagine max-width non funziona in Firefox e IE
- 24. Impossibile centrare il testo in IE ma funziona in firefox
- 25. Jquery DataTable TableTool non funziona in IE e Firefox
- 26. evento è definito in IE lavora a Firefox
- 27. come ottenere una scroll personalizzata in firefox e IE?
- 28. CSS: bordo blu solo in IE e Firefox?
- 29. Div 100% height funziona su Firefox ma non in IE
- 30. innerHTML funziona in IE e Firefox, ma non Chrome
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