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:

enter image description here

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

enter image description here

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.

Maybe this can help you http://stackoverflow.com/questions/12649904/css-text-ellipsis-when-using-variable-width-divs — user2258152, Oct 18 '13 at 00:40
Thanks @user2258152 - issue turned out to be that the cell was a fixed width and resized with javascript. Changing to min-width solved the problem. — Phill, Oct 18 '13 at 00:56

score 0 · Accepted Answer · answered Oct 18 '13 at 00:57

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.

Refresh CSS ellipsis when resizing container

1 Answers1