Menu
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>
434
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/
130
Remove width and height, add display:table;
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
