在HTML元素中淡化文本太长

Zac*_*ach 7 html css xhtml jquery

所以我的问题与此类似:

div里面的文字太长了

我不想做的是对文本进行硬性处理(切掉任何文本溢出).

所需的输出不包括省略号(...)但会"消失".所以,如果我有类似的东西:

<div class="text">This is the really long area of text that I want to chop</div>
Run Code Online (Sandbox Code Playgroud)

然后在我决定的任何地方,在中间说...... n会褪色,而且几乎完全褪色.当然定位是随机的,可能会掉落3或4个字母......

以下是优先顺序的可接受解决方案.

  1. 是否可以单独使用css淡出文本?
  2. 如果不可能,利用div.text中的另一个元素,我可以完成我想要的东西(可以褪色吗?).
  3. 用jQuery做吧?(呃...不喜欢)

egr*_*nin 7

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

这与创建"阴影"的方式类似.

编辑添加:

我应该直接回答你的清单项目.

  1. 不,除非你逐个字符地执行,否则不可能仅使用CSS淡出文本; 但这几乎不可能控制不同的浏览器和屏幕分辨率.

  2. 不透明不褪色.

  3. 我不知道这样做的jQuery对象,但我没有用过太多.


jul*_*n_c 7

你的解决方案2.确实是可能的.您只需使用具有线性渐变背景的绝对定位元素,从白色到透明.

不需要图像.

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