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

Question

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

6

有许多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>

- checkmate711

将插件中的所有行反转，看看是否能够正常工作？ - adeneo

“height:auto;”怎么样？ - urish

div默认是具有灵活性的。您应该能够将样式减少到border:1px solid red;，并且div将会被拉伸。 - calvin

但是div是display:block类型，所以它的宽度将会是100%，高度自动调整。 - enapupe

@enapupe 我看到了你的回答。你是对的，虽然将宽度设置为百分比比display: table;有更好的支持。http://caniuse.com/#search=Table%20display 让div保持为div更容易和更自然。 :p - calvin

为什么百分比宽度适合你？还有，更好的支持？94%不够吗？ - enapupe

3个回答

1

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

- enapupe

容器的宽度和高度最初是固定的，我无法更改。有没有一种方法可以在不移除宽度和高度的情况下“计算”容器的大小？ - checkmate711

你不能把width:x改成min-width:x吗？ - enapupe

1

你可以决定盒子如何适应文本——是宽度还是高度。

如果你想要宽度，改变

width: auto

如果您想要高度，请更改：

height: auto

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

- Gautam Bhutani

容器的宽度和高度最初是固定的，我不能更改。有没有一种方法可以“计算”容器的大小？ - checkmate711

@gautamBhutani，你能告诉我如何调整容器大小以适应<div>吗？ - Raj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- phl · Accepted Answer

这应该使用 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/