0

我有这个想法来淡出任何文本字符串的最后一个限制字符。

例子 ：

在此处输入图像描述

可能吗？有谁知道，如何使用jquery/创建这个CSS3？

4

4 回答 4

2

我强烈建议为此使用 CSS——text-overflow:ellipsis这是做这种事情的标准方式。

回到 Firefox 还在 3.6 版的那一天，它不支持ellipsis.，我不得不想出一个替代解决方案。我当时的解决方案正是你在这里所建议的，在行尾淡出。

我通过在相关元素的顶部放置一个附加元素来实现它，该元素具有从透明渐变为纯色的渐变背景，以匹配文本的背景。这个渐变可以使用 CSS 来实现，但是由于我需要支持旧版本的 IE（而且当时还没有 CSS3Pie），所以我实际上使用了 PNG 图像来代替渐变效果。不过，无论哪种方式都有相同的区别。

这样做的好处是它可以工作，并为我们提供了一个好看的文本淡出效果。

缺点是（1）它给用户选择文本带来了问题，（2）如果你的背景不是简单的纯色，它看起来很糟糕，以及（3）它增加了额外的工作，当ellipsis解决方案非常简单时.

恐怕我无法向您展示任何代码，因为一旦大多数 Firefox 用户升级到支持ellipsis.

于 2012-08-31T20:54:07.047 回答
2

您可以通过 jQuery 添加text-overflow: ellipsis到您的元素并附加一个<span>透明渐变背景 - DEMO

p {
    text-overflow: ellipsis;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    margin: 25px 0;
} 

span {
    display: inline-block;
    height: 20px; 
    width: 50px;
    background: red;
    position: absolute;
    left: 85px;

    background: -moz-linear-gradient(right,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,1)); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
​
于 2012-08-31T20:46:50.243 回答
1

我想不出更好的方法：

<span>test test test test</span><span style="opacity: 0.50; "> fading.</span><span style="opacity: 0.40; ">.</span><span style="opacity: 0.20; ">.</span><span style="opacity: 0.10; ">.</span>​​​​​​​​​​

jsfiddle：http: //jsfiddle.net/DLbBZ/

这是一个 jQuery 解决方法，尽管您已经有了答案：P

http://jsfiddle.net/sXNQF/

于 2012-08-31T20:36:07.877 回答
1

您可以尝试 CSS3text-overflow属性：

.test {
    text-overflow: ellipsis;
}
于 2012-08-31T20:26:14.940 回答