Question

i have this idea for fadeout last limit characters of any text strings.

example :

Is it possible? Does anyone know, how to create this using jquery/CSS3?

Answer 1

I strongly recommend using CSS text-overflow:ellipsis for this — it’s the standard way of doing this kind of thing.

Back in the day when Firefox was still at version 3.6, it didn’t support ellipsis, and I had to come up with an alternative solution. My solution at the time was exactly what you’re suggesting here, a fade-out at the end of the line.

I achieved it by placing an additional element on top of the element involved, which had a gradient background that fades from transparent to solid colour, to match the background of the text. This gradient could be achieved using CSS, but since I needed to support old versions of IE (and since CSS3Pie didn’t exist at the time), I actually used a PNG image instead for the gradient effect. Same difference either way, though.

The plus side of this was that it worked, and gave us a good looking fade out effect for the text.

The down sides were (1) it caused problems for users with selecting the text, (2) it looks terrible if your background isn’t a simple solid colour, and (3) it added extra work, when the ellipsis solution was so much simpler.

I’m afraid I can’t show you any code, because we got rid of it as soon as most Firefox users were upgraded to a version that supported ellipsis.