CODEWITHSUNDEEP
htmlcssprinting
Michael King
Michael King

Reputation: 638

CSS - How do I show page breaks on screen?

I understand that you can currently use page-break-before and page-break-after to have the browser interpret the media as page breaks, but I was wondering if it was possible to actually have those rendered on the webpage, like a print preview inside my website.

Upvotes: 4

Views: 6060

Answers (1)

Pat Dobson
Pat Dobson

Reputation: 3299

The problem is that page breaks, by their very nature only make sense in a print based settings. But, assuming you want them shown, simply apply the 'page-break-before' etc. css to a div and then, for screen only, style that div with (say) a dotted line. For print styles, just hade the dotted line and the page break will render properly...

For example:

HTML

<div class="myPageBreak"></div>

CSS (screen)

.myPageBreak{
    margin: 10px 0 0 0;
    padding: 10px 0;
    border-top: 1px dotted #c5c5c5;
}

CSS (print)

.myPageBreak{
    page-break-before: always;
    padding: 0;
    margin: 0;
    border: none;
}

This should produce a 'page break' div 20px in depth with a 1px with grey dotted line in the middle for screen. When printed, the line, the padding and the border won't display.

Upvotes: 3

Related Questions