CSS white-space nowrap doesn't increase width?

Question

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!

Hoffmann

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.

Kingston

Thanks for your reply. Problem is that the item container is already set for 'shrink-to-fit', that's why I can't find a solution to my problem.. I have to find a way to expand the item div when white-space:nowrap makes the text flow out of the box, otherwise it doesn't seem to work because the item container will shrink too much and the overflown text will be hidden.. – Hoffmann

Which method are you using to get shrink-to-fit? Non-working example? – Kingston

I don't quite understand what u mean by all this? Is it possible to have a nowrap and auto width? – Defamation

@MiguelStevens With a block element, no. Block elements are given an explicit size, and if the nowrap item within is too big, it overlaps. With an inline element, yes. Inline elements are as big as the items which are inside them. So the inline element will keep getting bigger to accomodate the nowrap text. – Winburn

Aha'. Thanks for the advice. I'm struggling with a table td not wanting to increase in width ( with bootstrap ) – Defamation

@MiguelStevens <td> will stretch to accomodate the element within it and all <td> elements will be as wide as the largest element in the column. You shouldn't need nowrap. To set an initial (default) width, use CSS. If the element data is too big, this width will be stretched further. To prevent the column from being stretched, use CSS to set the text to wrap. – Winburn

Answer 2

Is there a max-width set in any of the select's parent elements?

This would stop the white-space property from working. display: table does override a max-width if one is set however.

Cissy

Yep that was my problem. – Graben

Answer 3

I had a similiar problem, it was solved by specifying the padding value in px instead of percentage.

Myramyrah

It's unlikely that this is a determinisic solution to OP's problem and all similar problems. Could you post some code that demonstrates this? This would have been better as a comment. – Winburn

If an element has percentual widths or heights and the widths/heights of parents depend on the width/height of their children, this can indeed be the cause of weird whitespace errors. – Without

@MaxMommersteeg I don't see how this answer falls in that category. – Without