Les éléments avec nowrap restent bloqués à des éléments adjacents dans WebKit

Question

J'ai une liste de ul que j'afficher un menu horizontal. Je voudrais que le contenu de chaque li de rester sur une ligne, mais les articles entiers de li de sauter des lignes si nécessaire. Quelque chose comme:

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]

Logiquement, je viens de mettre li {white-space:nowrap;}, mais il y a un problème avec les navigateurs WebKit. Les produits avec nowrap se coincer à des éléments adjacents. Donc, dans le cas ci-dessus, tous les li sera sur la même ligne.

va de même pour un élément isolé avec nowrap l'intérieur d'un bloc de texte d'emballage.

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

Ce que je me attends quelque chose comme:

Visitez mes sites Gabriel Radic .com ou
Timbru Blog

Au lieu de cela, les deux liens finissent coincés ensemble, comme:

Visitez mes sites
Gabriel Radic .com ou Timbru Blog (roumain)

Y at-il une belle façon de dire Safari, Chrome et d'autres pour arrêter saisir les coudes des gens?

Merci pour votre aide.

Answer 1

Au lieu d'utiliser white-space:nowrap, dans ce cas, il est plus approprié d'aller avec display:inline-block.

Le CSS doit être adapté ici et là pour le changement, mais il fonctionne comme prévu.

Answer 2

Donc, si je comprends bien, vous voulez que le texte à l'intérieur des éléments de liste pour envelopper, mais pas le menu lui-même, est-ce pas? de sorte qu'il ressemble à:

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

Mais pas ressembler à:

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

Si tel est le cas, vous avez essayé de placer la nowrap sur la ul réelle plutôt que sur les éléments de la liste, car il est le ul que vous essayez de ne pas faire envelopper? Définissez ensuite une largeur pour les éléments de la liste afin qu'ils envelopper pour adapter cette largeur.