three dots - overflow:ellipsis

Question

My question is, why "text-overflow:ellipsis;" doesnt work for me? I have table on my page and i want to shorten some text inside cell(td). As you can see i have no width parameter in css. I get this value from json and then I set it with jquery. Maybe this is the problem? If so, how can i solve it?

#myTable2 td{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:47px;
    border-top: solid 1px #ebebeb;
    border-spacing:none;
    cellpadding: 0;
    cellspacing: 0;
    font-family:arial;
    font-size: 8pt;
    color: #3D3D3D;
    padding: 4px;
}

I test it in Chrome 19, newest Firefox and IE9.. Thanks

Answer 1

You need a width of the table and table-layout:fixed;

http://jsfiddle.net/CagPK/

#myTable2 td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}
#myTable2 
{
    table-layout:fixed;
    width: 100px;
}
​

Answer 2

text-overflow works with display: block elements, while table cells are display: table-cell elements. Enclosing your text in a <div> should work (fiddle sets the width when you click on the text).