Elemente mit Nowrap bleiben an benachbarten Elementen in Webkit festgehalten

Question

Ich habe ein ul Listen Sie als horizontales Menü auf. Ich hätte gerne den Inhalt von jedem li in einer Zeile bleiben, aber die Ganze li Elemente zu Sprungleitungen nach Bedarf. Etwas wie:

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]

Logischerweise würde ich einfach sagen li {white-space:nowrap;}, Aber es gibt ein Problem mit Webkit -Browsern. Artikel mit Nowrap bleiben an benachbarten Gegenständen festgehalten. Also in dem obigen Fall alle li wird in der gleichen Zeile sein.

Gleiches gilt für ein isoliertes Element mit nowrap In einem Wickeltextblock.

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

Was ich erwarten würde, ist so etwas wie:

Besuchen Sie meine Websites Gabriel Radic .com oder
Timbru -Blog

Stattdessen stecken die beiden Links zusammen, wie:

Besuchen Sie meine Websites
Gabriel Radic .com oder Timbru -Blog (Rumänisch)

Gibt es eine gute Möglichkeit, Safari, Chrome und anderen zu sagen, sie sollen aufhören, die Ellbogen der Menschen zu packen?

Danke für deine Hilfe.

Answer 1

Anstatt zu verwenden white-space:nowrap, In diesem Fall ist es angemessener zu gehen display:inline-block.

Das CSS muss hier und da für die Änderung angepasst werden, aber es funktioniert wie erwartet.

Answer 2

Wenn ich also richtig verstehe, möchten Sie, dass der Text in den Listenelementen einwickelt ist, aber nicht das Menü selbst, ist das richtig? so dass es so aussieht wie:

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

Aber nicht so aussehen wie:

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

Wenn dies der Fall ist, haben Sie versucht, die festzulegen nowrap auf dem tatsächlichen ul anstatt in den Listenelementen zu sein, da es das ist ul Dass du versuchst, nicht zu wickeln? Stellen Sie dann eine Breite für die Listenelemente ein, damit sie diese Breite einwickeln.