CSS - 如何使单词结尾模糊？

我真的很喜欢twitter如何模糊长名称的结尾，当您将邮箱上的光标移动到邮箱中时。CSS - 如何使单词结尾模糊？

我想尝试做一些类似的东西，但有一点区别 - 我有一个DIV（比如说宽度：100px;），当里面的文本长度超过100px时，则会是相应的结尾文字模糊...

任何人都可以给我一些例子/源/建议，如何做到这一点？

谢谢

example

来源

2012-04-24 user984621

看看这里 [梯度文本] [1] [1]：http://stackoverflow.com/questions/5498601/making-an-opacity-text-渐变透明背景 – 2012-04-24 11:45:33

http://css-tricks.com/text-fade-read-more/ – 2012-04-24 11:46:10

具有以下HTML：

<div> 
    <span>@someUserName</span> 
</div>

和CSS：

span { 
    display: inline-block; 
    position: relative; 
} 

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

JS Fiddle demo。

您当然也可以在生成的内容中使用百分比宽度：JS Fiddle proof of concept。

编辑响应意见，下面，报告说，IE 8（可能更低）不符合上述解决方案的工作：

不是在IE8的工作对我来说虽然.. 。

我已经更新了HTML以下：

<div> 
    <span>@someUserName 
     <!--[if ie]> 
      <span class="ieFadeout"></span> 
     <![endif]--> 
    </span> 
</div>

并更新了CSS：

div > span { 
    display: inline-block; 
    position: relative; 
} 

div > span::after { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 3em; 
    content: ''; 
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ 
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */ 
} 

span > .ieFadeout { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 3em; 
    background-color: transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */ 

}

JS Fiddle demo, working in Win XP/IE 8, and Chrome 18 (as before)。

参考文献：

来源

2012-04-24 11:54:11

我真的很喜欢这个解决方案！虽然不在IE8中工作你会推荐回落到图像？或者有没有办法让所有浏览器都能正常工作 – gordatron 2012-04-24 12:06:10

老实说;我不确定。我的印象是，IE8，至少，[应该能够处理这个CSS]（http://msdn.microsoft.com/en-us/library/cc351024（v = vs.85）.aspx＃generated）。我有一种感觉，你可能不得不使用条件样式表，并且可能需要使用内容中的额外元素，而不是生成内容。叹。 – 2012-04-24 12:38:27

我没有完全测试，我只是很高兴，当我打开你的jsfiddle铬我想在IE中尝试..也许它是一个jsfiddle的东西？ – gordatron 2012-04-24 12:40:40

你放在最重要的是另一个DIV的权利，并给它一个半透明的PNG背景，这从完全透明到全白变淡。喜欢的东西：

<div style="position: relative; width: 100px"> 
    @GuyKawasaki 
    <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image:url(overlay.png)"></div> 
</div>

来源

2012-04-24 11:43:28

CSS - 如何使单词结尾模糊？

回答

相关问题