page-break-inside being ignored

本秂侑毒 提交于 2019-12-11 05:58:32

问题


I am dynamically adding HTML from another page and styling it for print. However, page-break-inside: avoid;, when applied to my elements (any of them), does not seem to be taken into account when printing even though it shows up in the styles. I am using Chrome 31 on Windows

Here is a jsFiddle of the simplified version of my program (WARNING: It brings up the print preview after 3 seconds. To stop this simply comment out the setInterval at the bottom), This is the version where page-break-inside:avoid doesn't have any effect in print preview

The usual "fix" I've found, adding position:relative to the element and its parent, does not work in my case. Prefixing it (as a couple people suggested) doesn't seem to work either

I know page-break-inside: avoid; works in Chrome 31 with dynamically placed elements because I tested it out in a pseudo-version (WARNING: this also opens up print preview), but after spending hours removing code, playing around with the styles, and researching on the topic (most the posts are very outdated) I couldn't seem to get my more complex version working the same way

Thanks in advance for any insight!


回答1:


Change display property on your #fromTumblr ID from inline-block to block.

It seems logical that page break rules don't apply on inline elements and since that ID is for wrapper element that exceeds page size I guess thats the reason all your other rules are ignored.

Here's updated fiddle, tested on Chrome 31 and FF26 on Windows: http://jsfiddle.net/FSyT5/27/



来源:https://stackoverflow.com/questions/20535801/page-break-inside-being-ignored

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