Geek Answers Handbook

Put out the link at the end of the container

I would like to know if there is a way to supplant the link, and not truncate if it is too long to fit into the container. This is what I mean (image taken from user966582 question):

faded link

The simplest solution is to insert an element with absolute positioning with a gradient background into the container, but in this case it will cover the link so that it becomes invisible under the gradient.

Another way I found is using -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 need (the link is clickable!), But it lacks cross-browser support.

Is there a way to achieve the same in a cross-browser manner? Thanks in advance.

+6
source share
2 answers

Instead, you can apply a gradient to the background of the pseudo-element.

 .fade { position:relative; display:inline-block; } .fade:after { content:""; position:absolute; top:0; right:0; width:20px; height:100%; background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); }

jsFiddle

+2
source

You can try the following:

HTML

 <div> <a href="#"> This is some clickable Text </a> </div>

CSS

 div { position:relative; width:250px; overflow:hidden; } a { white-space:nowrap; display:inline-block; } a:after { content:" "; display:block; position:absolute; z-index:1; right:0; height:100%; width:150px; top:0; background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1))); }

Check out this demo http://jsfiddle.net/6GjHV/10/

+2
source

More articles:


All Articles