Verbinde einen Link am Ende des Containers

Question

Ich würde gerne wissen, ob es eine Möglichkeit gibt, einen Link auszublenden, anstatt ihn abzukürzen, wenn er zu lang ist, um in den Container zu passen. Dies ist das, was ich meine (das Bild aus den user966582's question genommen):

Die einfachste Lösung ist es, ein absolutes positionierte Element mit einem Gradienten Hintergrund in die Behälter einzuführen, aber in diesem Fall wäre es deckt die verlinken, damit es unter dem Gradienten nicht mehr klickbar ist.

Eine andere Art, wie ich gefunden ist -webkit-mask zu verwenden:

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

Das Ergebnis ist genau das, was ich brauchte (Link ist anklickbar!), Aber es fehlt ein Crossbrowser-Unterstützung.

Gibt es eine Möglichkeit, das gleiche auf eine Crossbrowser-Art zu erreichen? Vielen Dank im Voraus.

Answer 1

Sie könnten den Gradienten auf dem Hintergrund eines Pseudo-Element gelten statt

.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); 
} 

Answer 2

Sie konnten dieses versuchen:

HTML

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

CSS

012.351.

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))); 
} 

prüfen diese Demo http://jsfiddle.net/6GjHV/10/