How do I only display part of a string using css

Question

I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I\'d like to append \'...\' to the end.

For example, if

Answer 1

Unfortunately there isn't a good cross browser way to do this using only CSS. 'text-overflow' relies on the width of the string, and not the length of string as you need.

You can use the .length property of strings in javascript to achieve this

function ellipsify (str) {
    if (str.length > 10) {
        return (str.substring(0, 10) + "...");
    }
    else {
        return str;
    }
}

Hope this helps.