如何动态调整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不会有任何换行,除非你自己指定它们.但我猜你将它用于标签,所以你应该全部设置.

看一个例子.