I have a lot of div
s on a page with variable amounts of content in them. I am trying to use page-break-inside: avoid;
so that each div section is not broken over 2 pages.
It is working in Firefox but not IE8.
I have this in my CSS print file
.page-break-inside-avoid { page-break-inside: avoid; }
and my divs carry the class like in <div class="page-break-inside-avoid">
IE8 is supposed to support this now. Isn't it?
Am I doing something wrong? Anyone solved this issue? Or had any experience with it?
Any help would be great.
thanks a lot richard
Fortunately, you can tell the browser to keep specific elements together with break-inside . At the moment, the property universally accepts the values auto and avoid . Use avoid on an element within a multi-column layout to keep the property from breaking apart.
The page-break-inside property sets whether a page-break should be avoided inside a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on absolutely positioned elements.
Make sure all parent elements are display: block . Also consider overriding table , tr , td 's display styles with CSS grid for the print layout if you keep having issues with the table.
The page-break-inside property in CSS is used to specify how the page breaks inside the element to which it is applied while printing. It inserts a page break or sometimes it used to avoid page break inside an element while printing. Property Values: auto: It is the default value.
Webdevout.net is a great place to check browser CSS compatibility.
For page-break-inside
only IE8 and Opera 8+ are shown to support it
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With