CSS: ngắt trang trước, luôn luôn, ngoại trừ lần đầu tiên?

Tôi đang cố tạo một trang html đẹp. Tôi cần ép buộc một ngắt trang, giữa các cấu trúc cấp cao nhất, vì vậy tôi đã thêm một lớp CSS vào phần tử cấp cao nhất của mỗi cấu trúc và đặt page-break-before: luôn nằm trong CSS cho lớp đó. Ví dụ:CSS: ngắt trang trước, luôn luôn, ngoại trừ lần đầu tiên?

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

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

Vấn đề của tôi là tôi có được một trang trống, trước phần tử cấp cao nhất đầu tiên. Điều này có ý nghĩa hoàn hảo, xem xét những gì mà trang-break-before: luôn luôn được cho là phải làm. Nhưng tôi không muốn nó.

Vì vậy, một tùy chọn là không bao gồm lớp "toplevel" trong phần tử đầu tiên hoặc để cung cấp lớp "firsttoplevel" mới không đặt trước-break-before: luôn luôn và đặt nó cho lần đầu tiên yếu tố cấp cao nhất, và sau đó sử dụng "toplevel" cho tất cả những người khác. Tôi có thể làm điều đó, đủ dễ dàng, nhưng có vẻ như nó vi phạm sự chia rẽ mối quan tâm.

Vì vậy, tôi đã tự hỏi nếu có một cách để làm điều này trong CSS? Để thiết lập một quy tắc sẽ chỉ áp dụng cho "con đầu tiên" to lớn của "prettyprint"?

Bất kỳ ý tưởng nào cũng sẽ được đánh giá cao.

Nguồn

2010-08-02 Jeff Dege

:first-child

có thể làm việc nhưng khá chắc chắn có vấn đề với IE6, xem: http://www.quirksmode.org/css/firstchild.html

chỉnh sửa: không hoạt động trong IE6, và các phiên bản mới hơn của IE DOCTYPE phải được sử dụng cho nó để làm việc.

Nguồn

2010-08-02 19:53:18 Alex

+1 cách tốt nhất tôi có thể nghĩ đến. Bạn có thể sử dụng jQuery để thêm chức năng cho IE6. –

IE phá vỡ một số bản in ngay cả trong phiên bản hiện tại [đã làm cho tôi ít nhất], tôi sẽ không quan tâm nhiều về IE6: P – naugtur

Bạn là một người đàn ông khéo léo. – Pat

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

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

Nguồn

2016-12-16 18:41:47 John

giải thích sẽ mang lại lợi ích – happymacarts

Xem mô tả tốt về ngắt trang tại địa chỉ: https://css-tricks.com/almanac/properties/p/page-break/

Các công việc sau tốt trên Chrome v56. Tạo quy tắc triển khai page-break-before:always nhưng ngăn chặn quy tắc đó khi quy tắc được áp dụng cho loại đầu tiên của loại đó.

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

Nguồn

2017-02-18 00:08:30

CSS: ngắt trang trước, luôn luôn, ngoại trừ lần đầu tiên?

Trả lời

Các vấn đề liên quan