jquery - 在 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|nt 的中途……n 将褪色一半，而 t 几乎完全褪色。当然，位置是随机的，可能会落在 3 或 4 个字母之间......

以下是按优先顺序排列的可接受的解决方案。

1. 是否可以单独使用 css 淡出文本？
2. 如果不可能，利用 div.text 中的另一个元素，我能否完成我想要的(不透明度会消失吗？)。
3. 用 jQuery 做吗？ (呃……不是首选)

Answer 1

假设您的页面背景是白色的:制作一个从透明到白色(从左到右)的 gif。将其覆盖在 div 的右侧。您的文字似乎会褪色为白色。

这类似于“投影”的创建方式。

编辑添加:

我应该直接回答你的列表项。

1. 不，单靠 CSS 是不可能淡出文本的，除非你逐个字符地做；但这几乎不可能跨不同的浏览器和屏幕分辨率进行控制。

2. 不透明度不会消失。

3. 我不知道执行此操作的 jQuery 对象，但我用得不多。