Entiendo que se supone que la instrucción CSS page-break-inside:avoid previene un salto de página dentro de un div cuando se imprime un documento HTML. Al buscar en Internet, descubrí que solo es compatible con Opera e IE8. ¿Hay algún problema que me permita evitar los saltos de página en Firefox (3.6) o las versiones de IE menos de 8?page-break-inside: evite el equivalente para Firefox y/o IE
¿Qué tal que cumplan todos los elementos dentro de su elemento, excepto los primeros, y hacer que se rompan antes
#yourelement *+*{
page-break-before: avoid;
}
La pregunta es sobre FF y compatibilidad con IE anterior, no cómo usar la propiedad css. – aaaidan
Tenga en cuenta que estoy utilizando page-break-before, no page-break-inside que no es compatible, es por eso que tiene que usar este extraño selector para obtener el mismo efecto. En segundo lugar, esta publicación tiene casi 6 meses de antigüedad. – Gerben
Esto no funcionará para ≤IE7 y Firefox [no es compatible] (https://bugzilla.mozilla.org/show_bug.cgi?id=132035) 'avoid' tampoco. – Knu
Lo siento, mi respuesta es "no es posible", aunque me encantaría que si cualquiera puede probarme que estoy equivocado.
He encontré con el mismo problema últimamente, y después de hacer un poco de investigación, decidí ir sólo con
page-break-after: always;
después de cada serie de elementos varios.
Déjeme agregar que aparentemente todavía no está implementado en Firefox 54 – Wolf
Trate de usar white-space:nowrap lugar. Esto debería evitar que el texto se rompa dentro del elemento, al menos mientras está en la pantalla. No estoy seguro de cómo se traduce la impresión de medios, pero vale la pena intentarlo.
Más información: http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm
Para cualquier cosa que no es Firefox,
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
funcionará. Pero no para Firefox. En Firefox, lo que tendrá que hacer es verificar la altura y luego agregar page-break-after: always; cuando sea relevante.
En promedio, el margen será de 1 pulgada en la parte superior e inferior. Por lo tanto, para medir el número de píxeles consumiría una página de 10 pulgadas, utilicé esta:
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);
})();
que tenía un montón de divs cada uno con una gran cantidad de puntos en ellos. Entonces, lo que hice fue iterar a través de ellos, y luego comparé la altura actual de los mismos en la página actual con el valor 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;
}
});
Esto funcionó para mí en firefox.
Lo siento, no hay solución, pero funciona para mí en Mac OS Firefox 3.6.10 pero se congela en Mac OS Opera 10.62, no funciona en Safari. – daustin777