Geek Answers Handbook

Safari: Page Breakthrough: Avoid Work

I have a problem with page-break-inside: avoid CSS page-break-inside: avoid . I have several print blocks that have this css attribute set, however Safari breaks any content just like a real page break occurs, while it works in all other major browsers (current versions) that I have tested so far .

It doesn't seem to matter what type of content the print block contains, since I saw this behavior when the table element and the canvas are separated right in the middle.

Regarding http://css-tricks.com/almanac/properties/p/page-break/ and https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties. HTML is worried that it should work. Could not find additional and up-to-date information on this subject using the quick search.

I am on Windows 7 & Safari 5.1.7.

+9
css safari printing page-break-inside
source share
2 answers

Try using display: inline-block; instead of page-break-inside: avoid; . You can also add vertical-align: top; and width: 100%; so that elements appear as regular block elements instead of inline elements.

This method works reliably since long before page-break-inside: avoid; was implemented in most browsers. This is still the most reliable cross-platform way to prevent page breaks in the content block.

If you want to make the table indestructible, you can set display: inline-table; . Or you can just put it in a div with an inline block.

+13
source share

page-break-inside: avoid; has different syntax for different browsers.

 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */

This should work for Safari

 -webkit-column-break-inside: avoid;

For more information check out the pls: https://css-tricks.com/almanac/properties/b/break-inside/

-2
source share

More articles:


All Articles