Dynamically resize container to fit text

Question

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>

Reverse all the lines in a plugin that does the opposite, and see if it works ? — adeneo, Mar 21 '14 at 23:55
`div`s are flexible by default. You should be able to reduce the style to just `border:1px solid red;` and the div will stretch. — calvin, Mar 21 '14 at 23:57
But divs are display block type, so it will be 100% width, height auto — enapupe, Mar 21 '14 at 23:57
@enapupe I noticed your answer. You're right, although setting the width as a percentage has better support than `display: table;`. http://caniuse.com/#search=Table%20display Easier and more zen to let the `div` be a `div`. :p — calvin, Mar 22 '14 at 00:00
How come % width fix it for you? Also, better support? 94% is not enough? — enapupe, Mar 22 '14 at 00:02

phl · Accepted Answer · 2014-03-22T01:20:04.930

5

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/

edited Mar 22 '14 at 01:20

answered Mar 22 '14 at 00:09

phl

408
1
4
9

I think this is the right approach but in your example the div is not getting resized for the text content to become visible... – checkmate711 Mar 22 '14 at 00:27
I forget to include the margins of the p tag. outerHeight and outerWidth will compute with padding, border, and optionally margin (when when first argument is set to true) – phl Mar 22 '14 at 01:14
@phl, Can you please give me an idea how to resize the container to fit `
`
– Raj Mar 28 '18 at 22:58

score 1 · Answer 2 · answered Mar 21 '14 at 23:57

1

Remove width and height, add display:table;

answered Mar 21 '14 at 23:57

enapupe

15,691
3
29
45

Width and height of the container are initially given and I can't change that. Is there a way to 'calculate' the size of the container without removing width and height? – checkmate711 Mar 22 '14 at 00:09
Can't you change width:x to min-width:x ? – enapupe Mar 22 '14 at 00:11

score 1 · Answer 3 · answered Mar 21 '14 at 23:58

1

You could decide how do you want the box to fit the text - in width or in height.

If you want width, change

width: auto

If you want height, change

height: auto

JSFiddle: http://jsfiddle.net/39e7z/

answered Mar 21 '14 at 23:58

Gautam Bhutani

395
2
12

width and height of the container are initially given and I can't change that. Is there a way to 'calculate' the size of the container? – checkmate711 Mar 22 '14 at 00:09
@gautamBhutani, Can you please give me an idea how to resize the container to fit `
`
– Raj Mar 28 '18 at 23:03

Dynamically resize container to fit text

3 Answers3

Linked