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

Question

假设我有这个HTML代码段：

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

原始HTML输出http://img26.imageshack.us/img26/1571/beforeeffect.gif

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

期望的HTML输出http://img26.imageshack.us/img26/5851/desiredeffect.gif

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

Answer 1

我想知道如何动态调整div的宽度以适应文本内容（不包装）？

假设内容适合而没有溢出，您可以使用没有宽度设置的浮点（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不会有任何换行，除非你自己指定它们。但我猜你将它用于标签，所以你应该全部设置。

看一个例子。