retorno - salto de linea css
Alternativa para el salto de página dentro: evitar (4)
Tengo una página que genera cupones. Cada cupón es un div con una altura que varía según el contenido. Quiero imprimir tantos cupones en cada página como sea posible, pero no quiero que los cupones se dividan en varias páginas. La page-break-inside propiedades CSS page-break-inside hace exactamente lo que necesito. Sin embargo, necesito que esto funcione para Firefox y / o Chrome. Y esto no es compatible . Hace dos años y un año atrás, se hizo la misma pregunta, y no había una buena alternativa para esto. Somos mucho más desarrolladores de CSS3 / HTML5 / general ... ¿hay alguna alternativa para que esto funcione?
El ejemplo está aquí: http://jsfiddle.net/e3U66/2/
Supongamos que una página, cuando se imprime, mide 1000 px. Quiero que el segundo DIV aparezca en la segunda página, porque de lo contrario se divide en el primero y el segundo. Este código funciona en Opera, pero no en FF o Chrome.
coloque el flotador a la izquierda para estos div y establezca el ancho como 100%. No lo probaré. Puede funcionar.
¿Por qué no? Después de cargar la página con su contenido, use js para desplazarse por el contenido y sumar el alto de los div .
Una vez que haya alcanzado 1000px o lo que sea que haya determinado que es la altura de la página, inserte un div blanco con estilo de page-break-before antes del último div.
Honestamente, solo recomendaría crear imágenes de los cupones en realidad o generar un pdf. Supongo que probablemente ya esté generando códigos de barras para todos los cupones, por lo que generar las imágenes en sí no debería ser demasiado difícil usando php (o cualquiera que sea la elección del código).
Aquí hay información sobre la creación de imágenes php, pero SO probablemente sería una mejor fuente de ejemplos.
http://php.net/manual/en/function.imagecreate.php
Entonces podrías simplemente enumerar las imágenes.
<img src>
<img src>
<img src>
...
No tiene sentido que recrea la rueda.
Debajo de una solución hecha con la ayuda de la biblioteca Prototype (1.7)
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
//page height in px
//thisPageTotal is the total of pixels on the current page, in px
pageHeight = 1000;
thisPageTotal = 0;
Event.observe(window, ''load'', function(){
$$(''.coupon'').each(function(el){
var layout = el.getLayout();
thisPageTotal += parseInt(layout.get(''margin-box-height''));
if(thisPageTotal > pageHeight) {
thisPageTotal = parseInt(layout.get(''margin-box-height''));
var pageBreak = new Element(''div'', {
''class'': ''pagebreak''
});
el.insert({before: pageBreak});
}
//this shows the current amount of px on the current page
el.update(thisPageTotal);
});
});
</script>
<style type="text/css">
div {
border: 1px solid #000;
margin: 30px;
}
.pagebreak {
page-break-after: always;
}
</style>
</head>
<body>
<div id="div_1" class="coupon" style="height: 500px"></div>
<div id="div_2" class="coupon" style="height: 200px"></div>
<div id="div_3" class="coupon" style="height: 500px"></div>
<div id="div_4" class="coupon" style="height: 200px"></div>
<div id="div_5" class="coupon" style="height: 200px"></div>
<div id="div_6" class="coupon" style="height: 400px"></div>
<div id="div_7" class="coupon" style="height: 300px"></div>
<div id="div_8" class="coupon" style="height: 400px"></div>
<div id="div_9" class="coupon" style="height: 500px"></div>
<div id="div_10" class="coupon" style="height: 200px"></div>
</body>
</html>
Tal vez eso ayude