CSS – page break and dont print

Found this little CSS tidbit useful to day. I had output order entry records with multiple page detail. I wanted each page of the detail to print to its own sheet. The problem I faced was that the Top of the first page had a bunch of instructions that didn’t need to be printed with the order detail. So I used the media = print attributes to hide the area I did not want to print. I also used css to break the page between record details.

<style type="text/css" media="print">
.dontprint{display:none; height:0;}
.pbreak{page-break-after: always;}
</style>
...
<div class="dontprint">
// Screen instructions
</div>
...
<cfoutput query="q">
<div class="pbreak">
// screen and print order detail pages here.
</div>
</cfoutput>

Cup size   
Select size then click on coffee cup.
This entry was posted in Code, CSS. Bookmark the permalink.