在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>

然后在我决定的任何地方，说在wa中间...... n会褪色，而且几乎完全褪色。当然，定位是随机的，可能会掉落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/