如何动态调整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

我想知道如何动态调整

元素的textContent宽度，以便它能够完美地适应其文本内容（既不会出现换行，也不会出现滚动或截断）。

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

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

- Nordin

---

你想要一个没有任何水平滚动条的 div 吗？ - rahul

如果需要，浮动元素将会收缩包装。目前不清楚您所指的不包装是什么意思，也不确定您是想通过CSS还是JS实现这一点。 - annakata

感谢您的反馈。我编辑了问题，以更清楚地表达我想要实现的内容。不需要滚动，并且我可以接受CSS或JS解决方案（但如果可以完全通过CSS完成，我会很高兴被惊喜到）。 - Nordin

Answer 1

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

假设内容不会溢出，您可以使用没有设置宽度的浮动布局（CSS 2.1或更高版本中不需要设置宽度）。如果没有更多详细信息，我无法建议将其放置在哪里或设置哪些其他属性以获得所需效果（例如，浮动会向下围绕以下内容浮动，因此将其放置在段落开头）。

如果您不关心旧浏览器（如Internet Explorer）上的效果看起来是否完美，您可以使用display: table或display: table-cell，但要注意，表格不会溢出：它们会被拉伸。如果您希望避免div溢出但允许其超出视口（例如，横向滚动的电影条），则该拉伸可能是可取的。在这种情况下，altCognito建议使用white-space: nowrap非常有用。

- Anonymous

---

谢谢，伙计。我已经编辑了问题以使其更清晰。使用表格可能很有趣...但我想知道是否可以不使用表格元素来实现。无论如何，你的答案是迄今为止最有趣的答案。谢谢！ - Nordin

display: table与表格元素除了布局模型之外没有任何关系。 - Anonymous

Answer 2

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

这样做就可以了（尽管你可能应该更具体地指定要更改的div）。这意味着，除非您自己指定，否则使用此方法的div将没有任何换行符。但我猜你是用它来作为标签，所以你应该没问题了。 查看示例。

- cgp