Refresh CSS ellipsis when resizing container

Question

I'm using jQuery UI and have setup a table to resize columns.

span {      
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

I apply some simple ellipsis to the cells so that when they are too small I get the ...

If I look at the page it looks like:

When I resize the column however, it doesn't re-apply the ellipsis :(

Is there a simple way to do this? I tried removing the overflow by making it visible, then re-applying it to be hidden, but the ellipsis goes back to the original view when rendered.

Answer 1

The problem was that the Table Cell had a fixed width in CSS:

width: 120px;

Which was then resized with JavaScript. When the resizing happens the cell content in the cell stayed the same width.

Changing the CSS to be min-width: 120px; and resizing with JavaScript from width to min-width solved the problem.