page-break doesn’t work with floated elements. You need to have an element that’s not floated and apply the property to that element. Then it will work fine.

Yes, if you have a class for printing or pdf then having a different class for page breaks under this one will only be applied when printing.

For example. Let’s say you have a .PDF class that you apply to the body when you are printing something. You can also have a .landscape class and a .pageBreak class that you apply to the elements where you want a page-break. If you place this class under the .PDF one it will only apply when printing. Do the same with the .landscape.

// will only apply when printing (generating a pdf)
.PDF .pageBreak {
page-break-after: always;
}

// will only apply when landscape
.landscape .pageBreak {
page-break-after: always;
}

page-break-inside: avoid

This means that inside the element with this property page-breaks will be avoided. So if you have a wrapper element and add this property there will be no page breaks inside.

Hope this helped.

Personally, I use FPDF http://www.fpdf.org/ to generate pdf pages dynamically. You can use it to set the page height for the appropriate amount of content, which would give the effect of a “NO PAGE BREAK PDF”.

#betterlatethannever

Hey Preeti,

Have you tried asking around in our forums? Lots of folks from the community hang out and often answer questions there.

Cheers!

In my tests, page-break-inside: avoid works well in Gmail, Yahoo and even outlook office. But neither page-break-before:avoid nor page-break-after:avoid works in these clients. page-break-before:always works sometimes.

You could target first H2 after H1 with h2:first-child.