Make TH Text inside a jquery ui resizable DIV go under the next TH if it does not fit the column width

Question

I have this headers on a table with a div inside:

<TH><DIV class="resize">Name of Column</DIV></TH>
<TH><DIV class="resize">Name of Column2</DIV></TH>

$(".resize").resizable();

So when the user resizes the column "Name of Column" it will be cut in spaces, and if the text inside the div is greater than the text in all TDs of the TBODY then the letters are kept outside the dividing line.

What I want is that if this happens the header text from column1 will be under column2. For example:

If this is the | dividing line at the beginning I'll have this:

Name of Column | Name of column2

When I resize it goes like this:

Nam|e
of    |            Name of Column2
Col  |umn
       |
1     |
2     |
3     |

And I want it to be like this:

Nam|
of    |      Name of Column2
Col  |
       |
1     |
2     |
3     |

So as you can see the text will remain under the second TH.

Any ideas please?

Answer 1

You can try like this Fiddle

.hideOverflow{overflow:hidden}

You just need to hide the overflow content.

<TH><DIV class="resize hideOverflow">Name of Column</DIV></TH>
<TH><DIV class="resize hideOverflow">Name of Column2</DIV></TH>