CSS white-space nowrap doesn't increase width?

Question

Hi there,

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!

Answer 1

Block elements' widths don't depend on their content in the normal CSS static layout model. You can get ‘shrink-to-fit’ behaviour as part of other layout properties:

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

assuming no explicit width is set.