Re: [css-ui] text-overflow: fade ?

Wouldn't this be trivial to implement with masking and a linear gradient.
ie:
p {
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1)
80%,rgba(0,0,0,0) 100%);
}


On Tue, Oct 1, 2013 at 3:55 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> I recently received a request from a Blackberry implementor to look
> into specifying a "fade" value for text-overflow.  It would have the
> effect of fading overflowing content over the space of 1em, rather
> than dropping content and inserting an ellipsis.
>
> This effect is commonly used in Android apps, and currently requires
> some difficult hacking around with masking to achieve a bad simulacrum
> of the effect.
>
> I like the idea quite a bit - it's familiar to a lot of people,
> non-intrusive, and in my opinion rather attractive.
>
> Variants on this idea:
>
> 1. Make the amount of fade controllable, by providing an optional
> length along with the "fade" keyword.  This defaults to 1em.
>
> 2. Make the amount of fade somewhat dynamic, so that a line that just
> *barely* overflows won't pop in with a full-power fade.  Basically,
> make the fade size the minimum of 1em and the overflow amount.
>
> Thoughts?
>
> ~TJ
>
>