10
votes

CSS: Page-Break-Avant, toujours, sauf la première fois?

J'essaie de créer une page HTML jolie-impression. Je dois forcer une pause de page, entre constructions de niveau supérieur, j'ai donc ajouté une classe CSS à l'élément de niveau supérieur de chaque construction et définissez une pause-page avant: toujours dans le CSS pour cette classe. E.G.:

<body>
<div class="prettyprint">
    <div class='toplevel'>
        ...
    </div>
    <div class='toplevel'>
        ...
    </div>
</div>
</body>

.prettyprint .toplevel { page-break-before:always; }

"PROBLÈME MMY Est-ce que je reçois une page vierge, avant le premier élément de niveau supérieur. Ce qui est parfaitement logique, compte tenu de ce qu'auparavant: est toujours censé faire. Mais je ne le veux pas. P>

Ainsi, une option est de ne pas inclure la classe "Toplevel" dans le premier élément ou pour fournir une nouvelle classe "FirstToPlevelvel" qui ne règle pas la pause. -Avant: toujours et réglez-le pour le premier élément de niveau supérieur, puis utilisez "Toplevel" pour tous les autres. Je pourrais le faire, assez facilement, mais il semble que cela enfreint la séparation des préoccupations. P>

Alors je me demandais s'il y avait un moyen de le faire dans CSS? Pour définir une règle qui s'appliquerait uniquement au premier enfant «Toplevel» de «Prettyprint»? P>

Des idées seraient appréciées. P> P>

html css page-break

0 commentaires

3 Réponses :

4
votes

:first-child
might work but pretty sure there are issues with IE6, see: http://www.quirksmode.org/css/firstchild.htmledit: doesn't work in IE6, and for newer versions of IE doctype must be used for it to work.

2 commentaires

+1 la meilleure façon dont je puisse penser. Vous pouvez utiliser JQuery pour ajouter la fonctionnalité pour IE6.

Ie casse des impressions même dans la version actuelle [a fait pour moi au moins], je ne me soucierais pas beaucoup de IE6: P

1
votes

<style>
        .prettyprint {
            page-break-before: always;
            margin-top:0;
        }

        .prettyprint :first-of-type {
            page-break-before: avoid;
        }

1 commentaires

une explication serait bénéfique

6
votes

Voir une bonne description à la page Pause à: https: // CSS- astuces.com/almanac/properties/p/pageobrefre/

Les opèrent bien sur chrome v56. Créez une règle qui implémente pavé-break-avant: toujours code> mais supprimez cette règle lorsqu'il est appliqué au premier type. P>

p>



<div>
  <div class="print-per-page">Page 1</div>
  <div class="print-per-page">Page 2</div>
  <div class="print-per-page">Page 3</div>
</div>

1 commentaires

: premier de type travaillé dans wkhtmltopdf lorsque : premier enfant n'a pas. Merci pour ça!


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO                        
                        
                                            
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        
                        
                                            
                            Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?                        
                        
                                            
                            Comment puis-je définir un format pour les nombres d'entrée dans Blazor