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

Question

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

现在我几乎得到了我想要的东西，对容器中的每个项目使用white-space:nowrap，这样项目的文本就不会在新行上继续。使用的问题是文本流动开箱即用，而不是让框沿文本增长。我无法弄清楚如何解决这个问题。我已经尝试了text-overflow:ellipsis，但这似乎只是隐藏了溢出的文本并在最后添加了三个点（...）。

因此，简而言之，这就是我的问题：如果div应用white-space:nowrap而不是让文本流出来，我怎么能让div与其中的文本一起成长？我不想使用overflow:hidden隐藏文本，我想显示整个字符串..

提前致谢！

Answer 1

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

• float: left
• position: absolute
• display: inline-block
• 表

假设未设置明确的width。

Answer 2

我遇到了类似的问题，它通过以px而不是百分比指定填充值来解决。

Answer 3

是否在任何选择的父元素中设置了最大宽度？

这会阻止white-space属性工作。 display：table会覆盖max-width（如果设置了一个）。