print stylesheet, one page prints and cuts off remaining text
Solution 1
In print.css, set overflow: visible
instead of overflow: auto
on div#content
. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
Solution 2
I know this is an old question but here's another, newer way this can happen.
Check if you're using display: flex;
on the clipped element. It was the problem for me, setting it to block
fixed it.
Solution 3
I found that setting display: inline
on container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display block
or inline-block
. For me it was cutting off text, and setting it to inline
circumvented that. This also makes width
and height
irrelevant for the offending container div; which I have found to be a nuisance when printing.
@media print {
.container {
display: inline;
}
}
Here is a great article that helped me with this solution.
Solution 4
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
Solution 5
Are you already using the print
value for the media
attribute for your stylesheet like
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-before
attributes for elements that you don't want to break.
mjr
Updated on July 09, 2022Comments
-
mjr almost 2 years
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
I've tried everything I know but am at a loss.
-
mjr almost 15 yearsyes, the print stylesheet is definitely being used the page is really just a long list of tables, I don't really want a page break before each one
-
Jack Thor over 10 yearsIt does not seem to work in Chrome, but works fine for me in IE.
-
Mattias Nordqvist about 9 yearsSame here Jack Thor. Did you find a solution?
-
JerryA over 7 yearsIm using @print {},
body{overflow:visible;}
did it for me. -
cchamberlain over 7 yearsThis is not so helpful. Its not clear to what element you added these styles.
-
Jack over 7 yearsWorked for me in chrome. I was lazy and just added
* { overflow: auto !important; }
-
Lynnell Neri over 6 yearsDefinitely solved my issue. I put a class that
clear: both;
where it can only be found in print.css -
JPeG about 6 yearsI applied this solution to an issue we were having and I will say that in Chrome I am seeing little scrollbars all over the place. So, scroll bars do in fact exist on printed pages, apparently - which makes no sense.
-
aditya over 4 yearsWhat If I really want it to be flex?
-
Nifel about 4 yearsThis worked when adding
!important
. So the lazy solution would be* { overflow: visible !important; }
-
Chirag Purohit over 3 yearsIt worked me when I added style specific to print media @media print{ body{ overflow:visible; } }
-
Bob Brown over 3 years{time passes} I have one that I apparently need to be flex to get all the items on one line. I'd like it to print right, too.
-
Compiler v2 over 2 yearsDisplay inline worked like a charm!