Fade text too long inside HTML element

Question

So my questions is similar to this:

crop text too long inside div

What I don't want to do is have a hard end to the text (chopping off whatever text overflows).

The desired output would not include an ellipses (...) but would "fade" away. So if I had something like:

<div class="text">This is the really long area of text that I want to chop</div>

then at wherever I decide, say midway in wa|nt... the n would be half faded, and the t would be almost completely faded. Of course the positioning is random and could fall acroos 3 or 4 letters...

Here are acceptable solutions in order of preference.

1. Is it possible to fadeout the text with css alone?
2. If it's not possible, utilizing another element in div.text, can I accomplish what I want (can opacities fade?).
3. Do it with jQuery? (ugh... not preferred)

Answer 1

Assuming your page-background is white: Make a gif with goes from transparent to white (left to right). Overlay this on the right side of the div. Your text will seem to fade to white.

This is similar to how "drop shadows" are created.

Edited to add:

I should have answered your list items directly.

1. No, it is not possible to fadeout the text with CSS alone, unless you do it character-by-character; but that's almost impossible to control across different browsers and screen resolutions.

2. Opacities don't fade.

3. I don't know of a jQuery object that does this, but I haven't used it much.

Answer 2

Your solution 2. is indeed possible. You just have to use an absolutely-positioned element that has a linear-gradient background, from white to transparent.

No need for an image.

You can have a look at http://css-tricks.com/text-fade-read-more/