Safari page-break-inside:avoid not working

微笑、不失礼 提交于 2019-11-30 03:00:22

问题


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.


回答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.



来源:https://stackoverflow.com/questions/29258631/safari-page-break-insideavoid-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!