Question

假设我有这个HTML代码段：

<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>

Original HTML output http://img26.imageshack.us/img26/1571/beforeeffect.gif

我想知道如何动态调整div的{{1}}宽度，以便它很好地适应文本内容（文本不会包装也不会滚动也不截断）。

Desired HTML output http://img26.imageshack.us/img26/5851/desiredeffect.gif

我对使用CSS和/或JavaScript的任何解决方案持开放态度。

Answer 1

我想知道我怎么能动态地调整div的宽度以适应文字内容（没有包装）？

假设内容适合而没有溢出，您可以使用没有宽度设置的float（CSS 2.1或更高版本中不需要宽度）。如果没有更多细节，我无法建议将其放置在何处或设置其他属性以获得所需效果（例如，浮动在下面的内容周围浮动，所以将它放在段落的开头）。

如果您不关心在Internet Explorer等旧浏览器上看起来完美的效果，您可以使用display: table或display: table-cell，但需要注意的是表格不会溢出：它们会延伸。如果你想避免div的溢出，但允许它超过视口 - 例如，水平滚动的电影条，那么拉伸可能是理想的。在这种情况下，altCognito对white-space: nowrap的建议非常有用。

Answer 2

<style>
div {
  white-space: nowrap;
}
</style>

这可以解决问题（尽管你可能应该对你想要改变的div更加具体。这意味着你使用它的div不会有任何换行，除非你自己指定它们。但是我猜猜你是用来做标签的，所以你应该全力以赴。

See an example.

如何动态调整DIV元素的宽度以适应其文本内容？

2 个答案: