15

I am reconstructing a dropdown menu similar to a <select> box using div's and jquery. The div containing the dropdown items should have a minimum width, but no maximum width as it should grow along with the widest item in the list (so if i have very long item like '[This is the longest item within the container]', the whole container should be as wide as this entry.

Now I almost got what I want, using white-space:nowrap for each item within the container, so that the text of an item won't continue on a new line. The problem using is the text flows out of the box using, instead of letting the box grow along the text. I can't figure out how to fix this problem. I already tried text-overflow:ellipsis but that appears to just hide the overflown text and adding three dots (...) at the end.

So here is my problem in a nutshell: how can I let a div grow along with the text inside of it, when white-space:nowrap is applied on it, instead of letting the text flow out of it? I don't want to hide the text using overflow:hidden, I want to show the entire string..

Thanks in advance!

4

3 回答 3

21

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

  • float: left
  • position: absolute
  • display: inline-block
  • 桌子

假设没有明确width设置。

于 2010-10-25T12:20:30.020 回答
2

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

这将阻止 white-space 属性工作。display: table 如果设置了最大宽度，则确实会覆盖最大宽度。

于 2015-01-06T16:14:34.767 回答
1

我有一个类似的问题，它是通过在 px 中指定填充值而不是百分比来解决的。

于 2013-10-23T21:38:48.817 回答