Elements with nowrap get stuck to adjacent elements in WebKit

Question

I have a ul list that I display as a horizontal menu. I'd like the content of each li to remain on one line, but the entire li items to jump lines as necessary. Something like:

First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]

Logically, I'd just put li {white-space:nowrap;}, but there is a problem with WebKit browsers. Items with nowrap get stuck to adjacent items. So in the case above, all the li will be on the same line.

The same goes for an isolated element with nowrap inside a wrapping text block.

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.

What I would expect is something like:

Visit my sites Gabriel Radic .com or
Timbru Blog

Instead, the two links end up stuck together, like:

Visit my sites
Gabriel Radic .com or Timbru Blog (Romanian)

Is there a nice way to tell Safari, Chrome and others to stop grabbing people's elbows?

Thanks for you help.

Answer 1

So if I understand correctly, you want the text inside the list items to wrap, but not the menu itself, is that right? so that it looks something like:

item one | item two | item number | item four 
                         three

But not have it look like:

item one | item two | item number three | 
item four 

If that's the case, have you tried setting the nowrap on the actual ul instead of on the list items, since it's the ul that you are trying to make not wrap? Then set a width for the list items so that they will wrap to fit that width.

Answer 2

Instead of using white-space:nowrap, in this case it's more appropriate to go with display:inline-block.

The CSS needs to be adapted here and there for the change, but it works as expected.