2012-07-11 4 views
3

Je travaille actuellement sur l'impression de quelque chose. J'ai une page dynamique où il a des nombres variables d'éléments de niveau de bloc. Certains peuvent être une ligne, et certains peuvent être plus de 100 lignes.Travailler autour de page-break-inside: éviter

<div class='myclass'><span id="id1">1</span>text 1 line....</span></div> 
<div class='myclass'><span id="id2">2</span>text 10 lines....</span></div> 
<div class='myclass'><span id="id3">3</span>text 3 lines....</span></div> 
<div class='myclass'><span id="id4">4</span>text 100+ lines....</span></div> 
... 

Je connais le saut de page: avoid; quand il est implémenté (supporté par Opera, Chrome, et IE7 + en mode html strict seulement), supposons d'empêcher un élément de niveau bloc de contourner 2 pages. Étant donné que cette balise css ne supporte pas les navigateurs, je me demande s'il y a encore du travail à faire? J'ai essayé d'utiliser jquery, post-rendu, et de mesurer chaque élément par page, en additionnant la hauteur, et quand le dernier élément ajouté pour être supérieur à la hauteur de la page, j'ajoute un saut de page- avant: toujours à cet élément, mais cela ne fonctionne que si je suppose une certaine taille de page, et ce n'est jamais une bonne hypothèse.

sudo code only 
document.ready(function(){ 
    var pagesize = 100; 
    var currentheight; 
    $('.myclass').each(function(){ 
    if (currentheight + this.getHeight() > pagesize || this.getHeight > pagesize) { 
     this.css('page-break-before', 'always'); 
     currentheight = this.getHeight() % pagesize; 
    } 
    }); 
}); 

Et je ne veux pas ajouter simplement la page-break-before/after: toujours à chaque élément, car n'a pas de sens d'avoir une doublure 1 sur une seule page.

+0

Avez-vous trouvé une solution? –

+0

Non, et nous allons utiliser JS pour formater la page de manière à insérer manuellement le saut de page. CSS n'a tout simplement pas un bon moyen de mettre en forme le saut de page avec élégance, au moins pas de manière cohérente à travers les navigateurs. – Churk

Répondre

0

Essayez .myclass{page-break-before: auto;}

+1

Lisez-vous réellement la question avant de répondre. 'Et je ne veux pas simplement ajouter page-break-before/after: toujours à chaque élément car cela n'a pas de sens d'avoir un liner sur une seule page. 'Auto exhibe le même comportement, donc c'est toujours inutile . – Churk

Questions connexes