Menu
I have a problem with CSS page-break-inside: avoid. I have some printing blocks which have this css attribute set, however Safari breaks any content just as the real page break occurs, while it works in all other major browsers (current versions) I've tested so far.
It doesn't seem to matter which type of content the printing block holds as I've seen this behavior with both a table and a canvas element being split up right in the middle.
As far as http://css-tricks.com/almanac/properties/p/page-break/ and https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html is concerned it should work. Couldn't find any additional and recent information on this matter with a quick search.
I'm on Windows 7 & Safari 5.1.7.
862
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.
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.
Similarly, you can avoid page breaks inside tables, lists, and any other block-level element. A code block split into two spanning across two pages because of a page break inside it. This can be avoided using the page-break-inside property.
always − A page break should be forced after this element's box. avoid − No page break should be placed after the element's box if at all possible. left − Force one or two page breaks after the element's box, such that the next page on which an element is printed will be a left-hand page.
Try using display: inline-block; instead of page-break-inside: avoid;. You may also want to add vertical-align: top; and width: 100%; to make the elements behave like normal block elements instead of inline elements.
This technique has been working reliably since long before page-break-inside: avoid; was implemented in most browsers. It's still the most reliable cross-platform way to prevent page breaks in a block of content.
If you want to make a table unbreakable, you can set display: inline-table; on it. Or you can just put it in an inline-block div.
59
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
