Use jquery ui resizable to scale child text

Use jquery ui resizable to scale child text

I have multiple div containers that are being initialized as resizable on document.ready.   I wrote some code that resizes the height of the text within a child element when the div is resized.   My problem is if I resize the div strictly on the horizontal axis, the text can be wider than the container.    How can I modify my code so that it always remains within the container?  My code is below:

  1. //Single Field Resizing
        $( ".resizable" ).resizable({
            resize: function()
            {
                $( this ).find( ".data" ).css( "font-size", ( $(this).find(".data").height() - 20 ) + "px" ).css( "line-height", ( $(this).find(".data").height() - 40 ) + "px" );
            }

        });







The html structure is:

<div class="resizable">
      <div class="data">Text</data>
</div>