Hello,

I am having a long text in a div. It represents some example of whatever and is not so important to be displayed completely.

In the web page I use max-height: 4cm, overflow: auto; in order to limit the height of the element. User can use scrolling to see the complete text if he wants.

In the printed version the scrolling is not possible and as it is not so important to see it all, so I want to display just the beginning and cut the rest using: max-height: 4cm, overflow: hidden;

Now, in order not to confuse reader, I want to depict that the example was cut by fading the bottom of the box.

See the attached example of what I mean. The problem with Prince is that it adds some border or what to the fading element. How can I get rid of that?

Edit: corrected pdf

1. princexml_test_div_fade.html‎ 1.3 kB ‎
   text faded at the end of the box
2. princexml_test_div_fade.pdf‎ 29.9 kB ‎
   pdf for fading

Edited 6 Jul 2017 by dlast

Note: the PDF apparently has to be displayed in the Acrobat Reader to see the fading. E.g. Firefox does not display fading at all.

Edited 6 Jul 2017 by dlast

The gradient is rendered with a PDF tiling pattern. On some PDF viewers, you can see the end of the gradient repeating at the start. A workaround is to avoid the discontinuity between the last and the first gradient stops, e.g.

background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0) 100%);