CSS: page-break-avant, toujours, sauf la première fois?

J'essaie de créer une jolie page HTML. J'ai besoin de forcer un saut de page, entre les constructions de niveau supérieur, donc j'ai ajouté une classe CSS à l'élément de premier niveau de chaque construction, et définissez page-break-before: toujours dans le CSS pour cette classe. E.g .:CSS: page-break-avant, toujours, sauf la première fois?

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

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

Mon problème est que j'obtiens une page vierge, avant le premier élément de premier niveau. Ce qui est parfaitement logique, compte tenu de ce qui précède page: toujours est censé faire. Mais je ne le veux pas. Donc, une option est de ne pas inclure la classe "toplevel" dans le premier élément, ou de fournir une nouvelle classe "firsttoplevel" qui ne définit pas page-break-before: toujours, et définissez-la pour la première élément de haut niveau, puis utilisez "toplevel" pour tous les autres. Je pourrais le faire, assez facilement, mais il semble que cela viole la séparation des préoccupations.

Alors je me demandais s'il y avait un moyen de le faire en CSS? Pour définir une règle qui s'appliquerait uniquement au premier enfant "toplevel" de "prettyprint"?

Toutes les idées seraient appréciées.

Source

2010-08-02 Jeff Dege

:first-child

pourrait fonctionner, mais assez sûr qu'il ya des problèmes avec IE6, voir: http://www.quirksmode.org/css/firstchild.html

modifier: ne fonctionne pas dans IE6, et pour les nouvelles versions de IE doctype doivent être utilisés pour que cela fonctionne.

Source

2010-08-02 19:53:18 Alex

+1 la meilleure façon que je peux penser. Vous pouvez utiliser jQuery pour ajouter la fonctionnalité pour IE6. –

IE casse quelques tirages même dans la version actuelle [fait pour moi au moins], je ne ferais pas grand cas de IE6: P – naugtur

Vous êtes un homme smrt. – Pat

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

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

Source

2016-12-16 18:41:47 John

une explication serait bénéfique – happymacarts

Voir une bonne description sur des sauts de page: https://css-tricks.com/almanac/properties/p/page-break/

Les travaux suivants bien sur Chrome V56. Créez une règle qui implémente page-break-before:always mais supprimez cette règle lorsqu'elle est appliquée au premier de son type.

.print-per-page { 
 
    page-break-before: always; 
 
} 
 

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

<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>

Source

2017-02-18 00:08:30

CSS: page-break-avant, toujours, sauf la première fois?

Répondre

Questions connexes