print stylesheet, one page prints and cuts off remaining text

Question

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.

score 73 · Accepted Answer · edited Jul 22 '15 at 01:04

73

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.

edited Jul 22 '15 at 01:04

Zach Saucier

24,871
12
85
147

answered Aug 21 '09 at 14:55

CalebD

4,962
24
16

3

It does not seem to work in Chrome, but works fine for me in IE. – Jack Thor Feb 07 '14 at 01:17
Same here Jack Thor. Did you find a solution? – Mattias Nordqvist May 04 '15 at 13:00
4

Worked for me in chrome. I was lazy and just added `* { overflow: auto !important; }` – Jack Feb 02 '17 at 10:49
1

I 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. – JPeG Apr 13 '18 at 17:51
4

This worked when adding `!important`. So the lazy solution would be `* { overflow: visible !important; }` – Nifel Jun 15 '20 at 11:20
It worked me when I added style specific to print media @media print{ body{ overflow:visible; } } – Chirag Purohit Feb 08 '21 at 18:19
* { overflow: visible !important; } worked for me too... thanks – Shivani Sep 13 '22 at 06:19

score 28 · Answer 2 · answered Aug 30 '16 at 13:04

28

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.

answered Aug 30 '16 at 13:04

red-X

5,108
1
25
38

3

What If I really want it to be flex? – aditya Jan 08 '20 at 06:39
*{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. – Bob Brown Feb 21 '21 at 18:00

score 13 · Answer 3 · answered Jan 08 '15 at 05:42

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.

Display inline worked like a charm! – Compiler v2 Jan 13 '22 at 16:18 — Compiler v2, Jan 13 '22 at 16:18

score 5 · Answer 4 · answered Aug 21 '09 at 14:44

5

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.

answered Aug 21 '09 at 14:44

Pat

25,237
6
71
68

Definitely solved my issue. I put a class that `clear: both;` where it can only be found in print.css – Lynnell Neri Dec 06 '17 at 14:22

score 3 · Answer 5 · answered Aug 21 '09 at 14:40

3

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.

answered Aug 21 '09 at 14:40

Randell

6,112
6
45
70

yes, 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 – Aug 21 '09 at 15:13

score 2 · Answer 6 · answered Oct 28 '09 at 21:18

I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.

In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.

I'm having a different problem in IE8 now. UGH!

score 1 · Answer 7 · answered Apr 03 '15 at 11:54

1

if overflow:visible; not works, try overflow-y:visible;

(i had body{overflow-y:scroll;}, and body{overflow:visible;} in print.css not rewrited it...)

answered Apr 03 '15 at 11:54

buTs

41
2

1

Im using @print {}, `body{overflow:visible;}` did it for me. – JerryA Oct 26 '16 at 03:54

score 0 · Answer 8 · answered Apr 19 '18 at 20:24

I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before

score 0 · Answer 9 · answered Aug 17 '18 at 12:56

0

just setting display: inline solved my same problem.

Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm

answered Aug 17 '18 at 12:56

Pavan Joshi

1
1

score 0 · Answer 10 · answered Apr 04 '19 at 21:06

0

I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;. My modal was originally position: fixed;.

answered Apr 04 '19 at 21:06

John Bullington

26
2

score 0 · Answer 11 · answered May 27 '21 at 23:35

0

For me setting overflow:visible; for body solved the problem.

body {
        overflow: visible;
}

answered May 27 '21 at 23:35

Arash Younesi

1,671
1
14
23

score 0 · Answer 12 · answered Nov 11 '21 at 13:53

0

I've had this issue to. In my case, this was due to an

position: fixed;

Element. I changed this to

@media print{
   position: relative;
}

Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.

answered Nov 11 '21 at 13:53

DBR

146
1
10

score 0 · Answer 13 · answered Jul 20 '22 at 22:50

If the items on the page are getting partially cut off, adding an :after element of 10px did it for me.

<div class="print-row">
  <div class="print-items">
    <div class="print-item"></div>
    <div class="print-item"></div>
    <div class="print-item"></div>
  </div>
</div>

.print-items {
  page-break-before: auto;
  page-break-after: auto;
  page-break-inside: avoid;
}

.print-item {
  break-inside: avoid;
}

.print-item:after {
  position: relative;
  display: block;   
  min-width: 100%;
  height: 10px;
  width: 100%;
  content: "";
}

score 0 · Answer 14 · edited Oct 26 '12 at 04:57

0

I fixed the problem by adding overflow:visible; and give it padding-right: 30px; to substitute for the scroll bars width.

edited Oct 26 '12 at 04:57

Andrew Barber

39,603
20
94
123

answered Feb 08 '12 at 15:58

Hassan

1

This is not so helpful. Its not clear to what element you added these styles. – cchamberlain Oct 31 '16 at 19:08

score -2 · Answer 15 · answered Dec 21 '19 at 08:16

for me, the issue was this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

which putting any value other than 1 for initial scale solves my problem:

<meta name="viewport" content="width=device-width, initial-scale=0.8"/>

print stylesheet, one page prints and cuts off remaining text

15 Answers15

Linked