CSS: page-break-before, always, excepto la primera vez?

Estoy intentando crear una página html bonita. Necesito forzar un salto de página, entre constructos de nivel superior, así que agregué una clase de CSS al elemento de nivel superior de cada constructo y establecí el salto de página anterior: siempre en el CSS para esa clase. Por ejemplo:CSS: page-break-before, always, excepto la primera vez?

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

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

Mi problema es que me aparece una página en blanco, antes del primer elemento de nivel superior. Lo cual tiene mucho sentido, teniendo en cuenta lo que antes y antes de la página: siempre se supone que debe hacer. Pero no lo quiero

Entonces, una opción es no incluir la clase "toplevel" en el primer elemento, o proporcionar una nueva clase "firsttoplevel" que no establece page-break-before: always, y configurarlo para el primero elemento de nivel superior, y luego use "nivel superior" para todos los demás. Podría hacerlo, con bastante facilidad, pero parece que está violando la separación de las preocupaciones.

Entonces, me preguntaba si había alguna manera de hacerlo en CSS. ¿Para establecer una regla que se aplicaría solo al primer hijo "toplevel" de "prettyprint"?

Cualquier idea sería apreciada.

Fuente

2010-08-02 Jeff Dege

:first-child

podría funcionar pero bastante seguro de que hay problemas con IE6, consulte: http://www.quirksmode.org/css/firstchild.html

edición: no funciona en IE6, y para las nuevas versiones de IE tipo de documento se deben utilizar para que funcione.

Fuente

2010-08-02 19:53:18 Alex

+1 de la mejor manera que se me ocurre. Puede usar jQuery para agregar la funcionalidad para IE6. –

IE rompe algunas impresiones, incluso en la versión actual [al menos para mí], no me importaría demasiado IE6: P – naugtur

Eres un hombre smrt. – Pat

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

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

Fuente

2016-12-16 18:41:47 John

una explicación sería beneficiosa – happymacarts

ver una buena descripción de los saltos de página en: https://css-tricks.com/almanac/properties/p/page-break/

Los siguientes trabajos bien en Chrome V56. Cree una regla que implemente page-break-before:always pero suprima esa regla cuando se aplica al primero de su tipo.

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

Fuente

2017-02-18 00:08:30

CSS: page-break-before, always, excepto la primera vez?

Respuesta

Cuestiones relacionadas