13

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.

David
  • 3,285
  • 1
  • 37
  • 54
patman
  • 2,780
  • 4
  • 30
  • 54

2 Answers2

16

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.

DoctorDestructo
  • 4,166
  • 25
  • 43
  • 1
    Changing `display: flex` to `display: block` on a row in Bootstrap worked for me. Thanks for pointing me in the right direction. – Robert Brisita Aug 16 '19 at 05:03
0

page-break-inside: avoid (or variations thereof) seems to fail on Safari occasionally b/c its use depends very much on the display of the containing element and its height.

Mine was broken b/c I had defined the original page layout of the containing element to have height: 100%, which looks benign on the browser but I would notice that my elements were broken across pages in the print preview.

My fix was just to explicitly set the height of my container back to the browser default:

@media print {
    // Explicitly set height: auto
    .page-container {
        display: block;
        height: auto;
    }
    section {
        break-inside: avoid;
    }
}

This on Safari v14.1.2

Wallace
  • 259
  • 2
  • 7