CSS3 columns space bottom CSS3 columns space bottom google-chrome google-chrome

CSS3 columns space bottom


The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.

So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.

However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).

If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.

Is this of any help to you?