css - Safari page-break-inside:avoid not working

Question

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.

Answer 1

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.