CSS white-space nowrap 不会增加宽度？

Question

我正在重建一个类似于 <select> 的下拉菜单使用 div 和 jquery 的框。包含下拉元素的 div 应该有最小宽度，但没有最大宽度，因为它应该随着列表中最宽的元素一起增长(所以如果我有很长的元素，比如'[这是容器中最长的元素]'，整个容器应该和这个条目一样宽。

现在我几乎得到了我想要的，使用 white-space:nowrap对于容器中的每个元素，这样元素的文本就不会在新行上继续。使用的问题是文本流出使用的框，而不是让框沿着文本增长。我不知道如何解决这个问题。我已经试过了text-overflow:ellipsis但这似乎只是隐藏了溢出的文本并在末尾添加了三个点 (...)。

简而言之，我的问题是:当 white-space:nowrap 时，如何让 div 随其中的文本一起增长？应用于它，而不是让文本流出它？我不想使用 overflow:hidden 隐藏文本, 我想显示整个字符串..

提前致谢!

Answer 1

block 元素的宽度不依赖于它们在普通 CSS 静态布局模型中的内容。您可以获得“收缩以适合”行为作为其他布局属性的一部分:

• float :左
• position:absolute位置
• 显示:内联 block
• 表格

假设没有设置明确的 width。