Dynamically resize container to fit text

2020-06-21 04:51发布

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>

标签： javascript jquery html

3条回答

Bombasti

2楼-- · 2020-06-21 05:37

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/

0人赞添加讨论(0) 举报

家丑人穷心不美

3楼-- · 2020-06-21 05:40

Remove width and height, add display:table;

0人赞添加讨论(0) 举报

Emotional °昔

4楼-- · 2020-06-21 05:45

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/

0人赞添加讨论(0) 举报

Dynamically resize container to fit text

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间