省略号'...'值不是正确的颜色

Question

有必要时,文本溢出,每行末尾都有一个包含3个点'...'的表格.我使用了text-overflow属性的省略号值.它的工作原理是:当调整窗口大小时,会显示'...',但是当我表中的行包含一个span时,我有2个问题:

• '...'以跨度的字体颜色着色
• '...'的大小调整为span的字体大小

请参阅此处的演示:http://jsfiddle.net/Ah4DR/1/

也许这是一个新手问题,但我搜索了一段时间,没有找到任何解决方案.

我忘了说这不适用于Internet Explorer,但在Chrome上运行正常.

谢谢!

Answer 1

我有同样的问题; 虽然我的文字是深灰色的白色,但省略号的颜色似乎是黑色的.我通过简单地设置包含text-overflow:省略号的颜色来解决它,如下所示:

.ellipsis-div {
    white-space: nowrap;
    width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;       /* --> ellipsis color */
}

Answer 2

它肯定似乎是IE中的一个错误.(无论出于何种原因)读取第一个元素的颜色(或者可能是第一个内容)来确定省略号的颜色.但是,我确实为这个bug找到了"解决方法".我建议如果可能的话,以某种方式将其设置为仅定位IE(​​并且仅td使用您正在使用的元素text-overflow),但作为概念证明,这修复了它:

td:before {content: ''; color: black;}

显然td,定义颜色的第一个内容不一定是真实内容,因为伪内容有效.