HTML / CSS : hide overflow of fixed height div in pdf print

Question

EDIT: The problem seems to boil down to: Why don't pdfprinters properly read the CSS - and which ones do?

ORIGINAL POST:

I found many complaints about fixed height divs and printing but most people seem to have the opposite problem. I do want the overflow to NOT show in the printout. (Ideally adding a note, e.g. "etc.")

print.css

.myClass {
max-height:50px;
overflow:hidden;
}

rep.html

<div class="myClass">86777000, 8537681555608, 863831122008, 04317300008, ... </div>

The div contains a varying amount of numbers. I would like to create different print.css depending on whether the full information is needed, or examples suffice.

Firefox 36.0.4, Chrome 43.0.2357.124 m tried with: Bullzip pdf printer, printpdf 0.76

This works fine for the browser view. But the (pdf) printed version always shows the full content of the div.

How can I hide the overflow in the pdf printout? overflow:hidden; does not work. Thank you in advance.

Answer 1

Maybe you need to add ! important overflow:hidden !important

Answer 2

ok, I think from html you provided you need to put the content of div(.myClass) in tags as (<p></p>, <pre></pre>) and the content it has to be more width and more height then the div(parent) for example if the div(parent) height:100px; so the height for child it has to be more than 100px; and the width as well too, like so in the below

 .myClass {
   width: 300px;
   max-height: 50px;
   overflow: hidden;
 }

<div class="myClass">
  <pre>86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008, ...</pre>
</div>

If not try this code below:

.myClass {
  width: 300px;
  max-height: 50px;
  overflow-y: hidden;
  overflow-x: hidden;
}

<div class="myClass">
  <pre>86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008,86777000, 8537681555608, 863831122008, 04317300008, ...</pre>
</div>

I hope this will work for you if not let me know below in comment.