Question

188

Dynamically resize container to fit text

rated 0 times [ 190] [ 2] / answers: 1 / hits: 22386 / 10 Years ago, fri, march 21, 2014, 12:00:00

There are many jQuery plugins that let you resize a text to fit a container. But how can you dynamically change the width/height of a div container to fit the text inside of it?

Below an example. As you can see the text is currently overflowing the div. How can you programatically resize the container div to fit the text independent of the font size and content?

   <!DOCTYPE html>

   <html>

   <body>

   <div id=container style=width:100px; height:100px;border:1px solid red; overflow: hidden;>

   <p style=font-size:40px;>This is the text</p>

   </div>

   </body>

   </html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eliezerc

Add To Favorites

Follow

Total Points: 286

Total Questions: 102

Total Answers: 102

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

answered 10 Years ago terrellhunterm · Accepted Answer

It should be done with css but this is how to do it in JS/jQuery

$('#container').each(function(){

    var inner = $(this).find('p');

    $(this).height(inner.outerHeight(true));

    $(this).width(inner.outerWidth(true)); 

});

http://jsfiddle.net/2CDt5/2/

Alternative solution is to set the width height and display property with the css method

$('#container').css({'width':'auto','height':'auto','display':'table'})

http://jsfiddle.net/7yH2t/