Elementos com Nowrap ficam presos a elementos adjacentes no webkit

Question

eu tenho um ul Liste que exibo como um menu horizontal. Eu gostaria do conteúdo de cada li permanecer em uma linha, mas todo li itens para saltar linhas conforme necessário. Algo como:

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]

Logicamente, eu acabei de colocar li {white-space:nowrap;}, mas há um problema com os navegadores do webkit. Os itens com agora ficam presos a itens adjacentes. Então, no caso acima, todo o li estará na mesma linha.

O mesmo vale para um elemento isolado com nowrap Dentro de um bloco de texto de embrulho.

<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>.

O que eu esperaria é algo como:

Visite meus sites Gabriel Radic .com ou
Blog Timbru

Em vez disso, os dois links acabam presos, como:

Visite meus sites
Gabriel Radic .com ou Timbru Blog (romeno)

Existe uma boa maneira de dizer ao Safari, Chrome e outros para parar de pegar os cotovelos das pessoas?

Obrigado pela ajuda.

Answer 1

Ao invés de usar white-space:nowrap, neste caso, é mais apropriado ir com display:inline-block.

O CSS precisa ser adaptado aqui e ali para a mudança, mas funciona como esperado.

Answer 2

Então, se eu entendi corretamente, você deseja que o texto dentro dos itens da lista envolva, mas não o próprio menu, é certo? para que se pareça algo como:

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

Mas não parece:

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

Se for esse o caso, você já tentou definir o nowrap no real ul em vez de nos itens da lista, já que é o ul que você está tentando não fazer embrulho? Em seguida, defina uma largura para os itens da lista para que eles envolvam essa largura.