2010-08-02 19 views
9

Próbuję stworzyć ładną stronę HTML. Potrzebuję wymusić łamanie stron między konstruktami najwyższego poziomu, dlatego dodałem klasę CSS do elementu najwyższego poziomu każdej konstrukcji i ustawiłem break-before: zawsze w CSS dla tej klasy. Np .:CSS: page-break-before, zawsze, z wyjątkiem pierwszego razu?

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

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

Mój problem polega na tym, że otrzymuję pustą stronę przed pierwszym elementem najwyższego poziomu. Co ma sens, biorąc pod uwagę to, co poprzedza łamanie stron: zawsze ma to robić. Ale ja tego nie chcę.

Jedną z opcji jest nie umieszczanie klasy "toplevel" w pierwszym elemencie lub dostarczanie nowej klasy "firsttoplevel", która nie ustawia page-break-before: always, i ustaw ją dla pierwszego element najwyższego poziomu, a następnie użyj "toplevel" dla wszystkich pozostałych. Mógłbym to zrobić, z łatwością, ale wygląda na to, że narusza to oddzielenie obaw.

Więc zastanawiałem się, czy był sposób, aby to zrobić w CSS? Aby ustawić regułę, która miałaby zastosowanie tylko do pierwszego dziecka "toplevel" "prettyprint"?

Wszelkie pomysły będą mile widziane.

Odpowiedz

4
:first-child 

może działać, ale całkiem pewien, że są problemy z IE6, patrz: http://www.quirksmode.org/css/firstchild.html

edit: nie działa w IE6 i nowsze wersje IE doctype należy stosować go do pracy.

+0

+1 najlepszym sposobem mogę myśleć. Możesz użyć jQuery, aby dodać funkcjonalność dla IE6. –

+0

IE łamie niektóre wydruki nawet w aktualnej wersji [przynajmniej dla mnie], nie dbałbym o IE6: P – naugtur

+0

Jesteś smrt man. – Pat

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

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

+1

wyjaśnienie byłoby korzystne – happymacarts

2

zobaczyć dobry opis na stronie przerw w: https://css-tricks.com/almanac/properties/p/page-break/

następujące prace dobrze na Chrome v56. Utwórz regułę, która implementuje page-break-before:always, ale pomiń tę regułę, gdy zostanie zastosowana do pierwszego jej typu.

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

Powiązane problemy