How can I truncate long texts in a table using CSS?

Question

Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with \"...\"?

Here is the example: http://jsfiddle.net/NpABe

Answer 1

If you need truncate text for just one line use this css:

.truncate-text-one-line{
    width:80%;
    height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Otherwise, use this script:

function shorten_text(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    document.write(ret);
}