function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bdstangbdstang 

CSS page-break-inside

I have two <div>s. I know I can use page-break-after on the first <div> to force a page break, but I don't want to force a break. I only want to break after the first <div> if the second <div> won't fit on the same printed page as the first <div>.

I want 0 widows from the first <div> to show up on the next page where the second <div> starts.

 

So, if I use

.break{page-break-inside:avoid;}

as expected, I get a page break between the first <div> and the second <div>, and I get 2 "widows" on the next page, which I would expect because 2 widows is the default.

 

However, so that I don't get any "widows" I try to use

 

.break{page-break-inside:avoid; widows:0;}

 

However, when I do that, the page break does not occur at all. I've tried setting children:0; widows:0; and various combinations of both, but don't seem to be able to get things to work correctly.

 

Any help would be appreciated.