HTML / CSS: hide fixed height div overflow in pdf
EDIT: The problem seems to boil down to this: why pdfprinters don't read CSS, and which ones?
ORIGINAL MAIL:
I found many complaints about fixed div heights and printing, but most people seem to have the opposite problem. I want the overflow to NOT show up in the printout. (It is ideal to add a note such as "etc.")
print.css
.myClass {
max-height:50px;
overflow:hidden;
}
rep.html
<div class="myClass">86777000, 8537681555608, 863831122008, 04317300008, ... </div>
The div contains a different number of numbers. I would like to create different print.css depending on whether full information is needed or there are enough examples.
Firefox 36.0.4, Chrome 43.0.2357.124 m tried with: Bullzip pdf printer, printpdf 0.76
This is great for browser browsing. But the printable version (pdf) always shows the full content of the div.
How do I hide an overflow in a PDF printout? overflow: hidden; does not work. Thank you in advance.
source to share
OK, I think from the html you provided you need to place the content
div(.myClass)
in tags like (<p></p>
,<pre></pre>
) and the content should be wider than the width and more than the height , then the div (parent) if the div (parent)height:100px;
, so the height for the child should be more100px;
and width too, as in 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 works for you if you don't let me know in the comment below.
source to share