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

假设我有这个 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的textContent宽度,以便它很好地适合其文本内容(文本不会包装,也不滚动或截断).

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

我可以使用任何使用CSS和/或JavaScript的解决方案.

解决方法

I wonder how Could I dynamically
resized the div’s width to fit the
text content (without wrapping)?

假设内容适合没有溢出,您可以使用没有宽度集的浮点(CSS 2.1或更高版本中不需要宽度).没有更多的细节,我不能建议在哪里放置它或什么其他属性设置以获得所需的效果(例如,浮动浮动下来的内容,所以把它放在段落的开头).

如果您不关心像IE浏览器这样的旧浏览器的完美效果,可以使用display：table或display：table-cell,并注意表不会溢出：它们伸展.如果你想避免div的溢出,但允许它超过视口,例如,一个水平滚动的电影条,这种拉伸可能是可取的.在这种情况下,altCognito的白空间建议：Nowrap将是非常有用的.