The ellipsis '...' value is not the right color

Question

I have a table with 3 dots '...' at the end of each line when necessary (text overflow). I used the ellipsis value of the text-overflow property. It works: when the window is resized, the '...' are showed but I have 2 problems when the line in my table contains a span:

• the '...' are colored in the font color of the span
• the '...' are resized the size of the font of the span

See demo here: http://jsfiddle.net/Ah4DR/1/

Maybe this is a novice question but I searched for a time and not found any solution.

I forgot to say that this don't works on Internet Explorer but works fine on Chrome.

Thanks!

Answer 1

I had the same problem; while my text was white on dark-grey, the ellipsis color seemed to be black. I solved it by simply setting the color of the that contained the text-overflow: ellipsis, like this:

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

Answer 2

It certainly seems to be a bug in IE. It is (for whatever reason) reading the color of first element (or maybe it is the first content) to determine the color of the ellipsis. However, I did find a "work around" for the bug. I would recommend if possible setting this up in some way to just target IE (and only the td elements you are using text-overflow on), but as a proof of concept, this fixes it:

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

Apparently the first td content that is defining the color need not be real content, because the pseudo content worked.