I have a print stylesheet for my (Wordpress) site, and I want images to print on a single page rather than being split across pages. In some cases, even lines of text are being split across pages. I've included img {page-break: avoid;) in my print stylesheet, but no luck. I've found some previous answers but they're kind of old.
Is there a reliable way to print a moderately-sized image on a single page rather than splitting it across pages? Why are lines of text breaking across pages?
Site: http://74.220.217.211/housing-developments/grafton-townhomes/
Related posts:
Vladislav Medved :
I think the problem may come from the position property of elements. The element you don't want to break at page end and its parent should be declared as:\n\nposition: relative;\n\n\nThe rest of code styles is right and should looks like\n\n@media print {\n img {\n page-break-before: auto;\n page-break-after: auto; \n page-break-inside: avoid;\n position: relative;\n }\n}\n",
2017-08-21T08:21:43
Riskbreaker :
Try this:\n\n.site-container, .site-inner (heck body tag possibly) {position:relative;}\n\np {\n page-break-inside: avoid;\n position: relative; \n}\n\n\nCheck this FIDDLE\n\nAdd that in your print media\n\nI just review this in Chrome and it looks fine minus the image which also needs this:\n\nimg {\n page-break-before: auto;\n page-break-after: auto; \n page-break-inside: avoid;\n display: block;\n}\n\n\nLastly Wordpress has this but in reality not sure if it helps...\n\n <!--nextpage-->\n",
2015-12-30T17:41:48
Ngonidzashe Gweje :
img {\n page-break-before: auto;\n page-break-after: auto; \n page-break-inside: avoid;\n display: block;\n}\n\n\nthis will work",
2020-03-05T16:39:27
Kristjan Retter :
It could be that the parent element of the img element has style:\n\ndisplay: flex\n\n\nThen the break-inside doesn’t work.\n\nFor example if you change parent element display style to:\n\ndisplay: block\n\n\nThen it will work.",
2020-01-22T10:52:43
Mikko Rantalainen :
Different browsers have weird limitations for page-break-inside: avoid. Following limitations have been suggested in different articles:\n\nIf the document tree has the parent or grandparent with display:flex or display:grid, avoiding page-breaks will not work.\nIf the parent element has display:inline-block, avoid doesn't work.\nIn some cases, parent element needs position:relative for the value avoid to work in children. (Exact rules unknown.)\nIn some cases, both the parent element and the element that needs to avoid breaking needs position:relative for the value avoid to work. (Exact rules unknown.)\nThe parent element MUST NOT have display: inline-block.\nThe element MUST NOT have display:table-cell.\n\nIn short, @media print styles should probably avoid using float, flex, grid, position:absolute and position:sticky if you need to use page-break-inside: avoid. For best compatibility with different browsers, try to define whole tree from root to parent with display:block and the element that shouldn't break with display:inline-block in addition to page-break-inside: avoid.\nNone of the above exceptions are part of any specs so these are just bugs or limitations in browser implementations.\nAlso note that even though latest specs prefer break-inside: avoid instead of page-break-inside: avoid the real world browser supports is still pretty bad. I would recommend declaring both:\n.nobreak\n{\n page-break-inside: avoid;\n break-inside: avoid\n}\n",
2021-03-24T08:32:13