htmlcssprintingpage-break-inside

Printing HTML without forced page breaks

I am trying to print HTML with lots of big blockquote elements spanning half a page each or more. When printing, the browser adds a page break in cases where the blockquote element will not finish within the current page.

I've tried this on several browsers and same thing. How would one program the CSS to display the blockquotes even if they will be cut in the middle at the end of the current page?

for example:

text-text text-text text-text text-text 
text-text text-text text-text text-text 
<blockquote>
text-text text-text text-text 
text-text text-text text-text 
</blockquote>

Browsers will add a page break before the "blockquote" element if its contents will not finish by the end of the current page.

How would one prevent this?

I've fiddled with CSS properties page-break-before/inside/after but that did not help.

Solution

  • I believe you want one or both of these page-break rules:

    blockquote {
  display: block;

  page-break-before: avoid;
  page-break-inside: auto;
}

    ...or possibly the preceding element needs page-break-after: avoid.

    (You can also use the more recently-introduced properties break-before, break-after, and break-inside -- but browser support for these is still, as of 2023, not complete.)

    Per comments below, the element must have display: block for this to work; display: inline-block doesn't trigger the page break behavior.