Fade a link out at the end of container

I'd like to know if there is any way to fade a link out instead of truncating if it is too long to fit in container. This is what I mean (the image taken from the user966582's question):

The simplest solution is to insert an absolute-positioned element with a gradient background into the container, but in that case it would cover the link so that it becomes unclickable under the gradient.

Another way I found is to use -webkit-mask:

.wide-faded {
    -webkit-mask: -webkit-linear-gradient(right,
        rgba(255,255,255,0),
        rgba(255,255,255,1) 103px,
        rgba(255,255,255,1)
    );
}

The result is exactly what I needed (link is clickable!) but it lacks a crossbrowser support.

Is there any way to achieve the same in a crossbrowser manner? Thanks in advance.