FadeOut Last Character Of Text using jquery css3

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

You can add text-overflow: ellipsis to your element and append a <span> with transparent gradient background via jQuery - DEMO

p {
    text-overflow: ellipsis;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    margin: 25px 0;
} 

span {
    display: inline-block;
    height: 20px; 
    width: 50px;
    background: red;
    position: absolute;
    left: 85px;

    background: -moz-linear-gradient(right,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,1)); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
​

Answer 2

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.

Answer 3

You can try CSS3 text-overflow property:

.test {
    text-overflow: ellipsis;
} 

Answer 4

I cannot think of a better way:

<span>test test test test</span><span style="opacity: 0.50; "> fading.</span><span style="opacity: 0.40; ">.</span><span style="opacity: 0.20; ">.</span><span style="opacity: 0.10; ">.</span>​​​​​​​​​​

jsFiddle: http://jsfiddle.net/DLbBZ/

This is a jQuery workaround, although you already have the answer :P

http://jsfiddle.net/sXNQF/