CODEWITHSUNDEEP
htmlcssprinting
user1502852
user1502852

Reputation:

How to workaround CSS page-break-inside: avoid; failing to avoid break?

I am trying to have the contents of a web page print onto one page of paper. But, it is breaking the content into 2 pages, so I did some research here and see people recommending:

<style type="text/css" media="print">

#my_print_div{
width:940px;
height:770px;
page-break-after: always; /* Always insert page break after this element */
page-break-inside: avoid; /* Please don't break my page content up browser */
}

</style>

<div id='my_print_div'> My content to be printed here</div>

My div still breaks and then carries on to the next page to print - UNLESS I select "Shrink to Fit" - in Mozilla Firefox.

Thank you

Upvotes: 3

Views: 8692

Answers (1)

James Holderness
James Holderness

Reputation: 23001

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.

Upvotes: 6

Related Questions