Menu
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:
Print styles: How to ensure image doesn't span a page break
What are most useful media="print" specfic ,cross browser compatible css properties?
What is the correct way to do the CSS to avoid page breaks?
874
The page-break-inside property sets whether a page-break should be avoided inside a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on absolutely positioned elements.
The page-break-inside property in CSS is used to specify how the page breaks inside the element to which it is applied while printing. It inserts a page break or sometimes it used to avoid page break inside an element while printing. Property Values: auto: It is the default value.
always − A page break should be forced after this element's box. avoid − No page break should be placed after the element's box if at all possible. left − Force one or two page breaks after the element's box, such that the next page on which an element is printed will be a left-hand page.
It could be that the parent element of the img element has style:
display: flex Then the break-inside doesn’t work.
For example if you change parent element display style to:
display: block Then it will work.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
