淡出文本太長HTML元素內

Question

所以我的問題是與此類似：

crop text too long inside div

我不希望做的是有一個很難結束文本（斬去任何文本溢出） 。

期望的輸出將不包括省略號（...），但會「消失」。所以，如果我有這樣的事情：

<div class="text">This is the really long area of text that I want to chop</div> 

然後在哪裏我決定，說中途在西澳| NT ... n個將被半褪，和T將幾乎完全消失了。當然，定位是隨機的，可能會下降acroos 3個或4個字母......

以下是按優先順序接受的解決辦法。

1. 是否可以用css淡出文本？
2. 如果這是不可能的，利用div.text中的另一個元素，我可以完成我想要的功能嗎（可以遮蔽褪色？）。
3. 用jQuery做到這一點嗎？ （呃...不是首選）

Answer 1

假設你的頁面背景是白色的：做一個gif從透明到白色（從左到右）。覆蓋這個在div的右側。您的文字似乎會褪去白色。

這與創建「陰影」的方式類似。

編輯補充：

我應該直接回答您的列表項。

1. 不，不可能用CSS單獨淡出文本，除非按字符逐字逐句;但在不同的瀏覽器和屏幕分辨率下控制幾乎是不可能的。

2. 不透明度不褪色。

3. 我不知道的jQuery做到這一點的，但我沒有太多使用它。

Answer 2

您的解決方案2.的確是可行的。您只需使用具有線性漸變背景的絕對定位元素，從白色到透明。

不需要圖像。

你可以看看http://css-tricks.com/text-fade-read-more/