html - not - Page-break-inside: evita equivalentes para Firefox y/o IE
page-break-after not working (4)
Entiendo que el CSS dentro de un salto de página page-break-inside:avoid instrucciones debe evitar un salto de página dentro de un div cuando se imprime un documento HTML. A través de la búsqueda en Internet, he encontrado que solo es compatible con Opera e IE8. ¿Existe alguna solución alternativa que me permita evitar saltos de página en Firefox (3.6) o versiones de IE inferiores a 8?
¿Qué tal si solo coinciden todos los elementos dentro de tu elemento, excepto los primeros, y no los rompas antes?
#yourelement *+*{
page-break-before: avoid;
}
Lo siento, mi respuesta es "no es posible", aunque me encantaría que alguien me demuestre que estoy equivocado.
Me he encontrado con el mismo problema últimamente, y después de investigar un poco decidí simplemente ir con
page-break-after: always;
después de cada número de varios elementos.
Para todo lo que no sea Firefox,
.dontsplit { border: 2px solid black; page-break-inside: avoid; }
trabajará. 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. Entonces, para medir cuántos píxeles consumiría una página de 10 pulgadas, utilicé esto:
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);
})();
Tuve muchos divs cada uno con muchos párrafos en ellos. Entonces, lo que hice fue iterar a través de ellos, y luego comparé la altura actual de ellos en la página actual con el valor de 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 me funcionó en Firefox.
Trate de usar white-space:nowrap . 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 en medios impresos, pero vale la pena intentarlo.
Más información: http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm