CSS: разрыв страницы до, всегда, кроме первого раза? - PullRequest
Новая
       0

CSS: разрыв страницы до, всегда, кроме первого раза?

9 голосов
/ 02 августа 2010

Я пытаюсь создать красивую html-страницу. Мне нужно сделать разрыв страницы между конструкциями верхнего уровня, поэтому я добавил класс CSS в элемент верхнего уровня каждой конструкции и установил page-break-before: всегда в CSS для этого класса. E.g.:

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

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

Моя проблема в том, что я получаю пустую страницу перед первым элементом верхнего уровня. Что имеет смысл, учитывая то, что нужно делать перед переносом страницы: всегда следует делать. Но я этого не хочу.

Итак, один из вариантов - не включать класс «toplevel» в первый элемент или предоставлять новый класс «firsttoplevel», который не устанавливает page-break-before: всегда, и устанавливать его для первой вершины. -уровень элемента, а затем использовать «toplevel» для всех остальных. Я мог бы сделать это достаточно легко, но кажется, что это нарушает разделение интересов.

Так что мне было интересно, есть ли способ сделать это в CSS? Чтобы установить правило, которое будет применяться только к первому дочернему элементу «toplevel» prettyprint?

Любые идеи будут оценены.

Ответы [ 3 ]

4 голосов
/ 02 августа 2010 
:first-child

может работать, но почти наверняка есть проблемы с IE6, см .: http://www.quirksmode.org/css/firstchild.html

edit: не работает в IE6, и для новых версий IE необходимо использовать doctype.

3 голосов
/ 18 февраля 2017

См. Хорошее описание разрывов страниц: https://css -tricks.com / almanac / properties / p / page-break /

Следующее хорошо работает на Chrome v56. Создайте правило, которое реализует page-break-before:always, но подавляет это правило, когда оно применяется к первому типу. 

.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>
1 голос
/ 16 декабря 2016 
<style>
        .prettyprint {
            page-break-before: always;
            margin-top:0;
        }

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

...