CODEWITHSUNDEEP
htmlcssprinting
KroniK907
KroniK907

Reputation: 361

CSS Print - large paragraph is not being split across pages

I have an html page that I would like to be printer friendly. I have set it up in a way that I thought would be printer friendly but it doesn't seem to want to break a large paragraph across two pages, leaving me with a first page with just a few items on it and a large blank spot at the bottom of the page, and then a second page with a large paragraph on it.

Here is a simplified version of my page (a large amount of the data on the original page is generated via php and a mysql database etc.)

https://kronik907.github.io/css-page-break-example/

When you print the page you can see that the "Basic Information" section jumps to the second page, when it should be split across the first and second page.

You can view the raw html/css here:

https://github.com/KroniK907/css-page-break-example/blob/master/index.html

I am already using page-break-inside: auto on the <p> class but that doesn't seem to have done anything.

Upvotes: 1

Views: 868

Answers (1)

Hans
Hans

Reputation: 968

Remove display:inline-block; from the div.full selector. Displaying it as an inline-block appears to be causing the browser to not break it in half, even though you are using page-break-inside on the parent article.

Upvotes: 1

Related Questions