Text-overflow CSS truncation

Question

Earlier i was doing it dynamically using JS.. but we were getting some performance issues cuz of which we have to come with an alternative option.

I am now truncating a long text on my tab names using text-overflow style.

but i have a small issue if some one can resolve it

currently this is how my text truncation looks like

This text has been trun...

Here the three dots (...) comes in black colour and i want to change it to red.

Is there a way that we can achieve this one?

Answer 1

Works here:

• http://jsfiddle.net/TReRs/4/

 .overme {
        width: 300px;
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow: ellipsis;
        color: red;
    }

 <div class="overme">
        how much wood can a woodchuck chuck if a woodchuck could chuck wood?
    </div>



   

Trailing dots/ellipsis are colored in red using that basic CSS.