Question

有许多jQuery插件可以让你调整文本大小以适应容器。但是，如何动态更改div容器的宽度/高度以适合其中的文本？

下面是一个例子。正如您所看到的，文本当前正在溢出div。你怎么能以编程的方式调整容器div的大小以适应不受字体大小和内容影响的文本？

   <!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>

Answer 1

应该用css完成，但这是如何在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/

替代解决方案是使用css方法

设置宽度高度和显示属性

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

http://jsfiddle.net/7yH2t/

Answer 2

删除width和height，添加display:table;

Answer 3

您可以决定盒子如何适合文本 - 宽度或高度。

如果您想要宽度，请更改

width: auto

如果你想要身高，请改变

height: auto

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

动态调整容器大小以适合文本

3 个答案: