How do I only display part of a string using css

Firefox does in fact now support this, you just need to ensure that whatever you are trying to 'truncate' has block level formatting and a width - which could be the parent.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}

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.