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 - 如何使單詞結尾模糊？

回答

相關問題