如何改變一個修整字符串

Question

這裏過去幾年charachters的透明度的問題是：

• 我有各種長度的項目的列表，然後名稱。
• 我想修剪名稱爲140像素，如果他們更長。
• 作爲一個很好的乾淨的方式 向用戶演示字符串是否被修剪，我想 減少名稱的最後幾個字符的透明度，或者至少創建那個錯覺。
• 我做不是想要使用省略號...效果有幾個很好的理由。

我可能在純CSS？

Answer 1

當然可以，使用CSS。你有兩個選擇，但只有第一個才能獲得跨瀏覽器的最佳結果。

這個想法是覆蓋包含字符串的元素右側的僞元素。這隻有在背景色爲純色時纔有效，因爲我們將使用該顏色「淡入」。

HTML

<span>This string ends with an gradient to the background color overlayed</span> 

CSS

span {position:relative;} 
span.overlay:after { 
    content:"\0020"; 
    display:block; width:50px; 
    position:absolute; right:0px; top:0px; bottom:0px; z-index:2; 
    background-image:-webkit-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background-image:-moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background-image:-ms-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background-image:-o-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background-image:linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    /* Or use an actual png image fading to white for IE < 10 support */ 
} 

的:after元素將在所有瀏覽器，IE8 +工作。該-ms-gradient只在IE10 +，所以無論如何搞清楚如何使用舊的即梯度過濾器，或使用PNG圖像。

還有另一種較新的CSS方法，但目前只有WebKit的（鉻& Safari瀏覽器），mask-image支持。在這裏，您可以使用圖像或CSS漸變來遮罩元素。同樣的原則，除了你實際上可以淡化元素（如果你的文本是在模式中）。

span{ 
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 50px); 
} 

你可以看看這個的jsfiddle：http://jsfiddle.net/rgthree/b96sv/

Answer 2

是的，你可以做到這一點，但你必須將每個尾部字符包裝在<SPAN>中，併爲每個字符設置CSS不透明度。