Элементы с NOWRAP застревают в соседние элементы в WebKit

Question

у меня есть ul Список, который я отображаю как горизонтальное меню. Я бы хотел, чтобы содержание каждого li остаться на одной строке, но весь li Предметы для прыжков по мере необходимости. Что-то типа:

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]

Логично, я бы просто поставил li {white-space:nowrap;}, но есть проблема с браузерами WebKit. Предметы с NOWRAP застряли до соседних предметов. Так что в случае выше, все li будет на одной линии.

То же самое идет для изолированного элемента с nowrap внутри упаковочного текстового блока.

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

Что я ожидал, это что-то вроде:

Посетите мои сайты Габриэль Радика .com.com. или
Блог Timbru

Вместо этого две ссылки в конечном итоге застряли, как:

Посетите мои сайты
Габриэль Радика .com.com. или Блог Timbru (Румынский)

Есть ли хороший способ сказать сафари, хром и другим, чтобы перестать хватать локти людей?

Спасибо за помощь.

Answer 1

Вместо того, чтобы использовать white-space:nowrap, в этом случае это более уместно идти с display:inline-block.

CSS должен быть адаптирован здесь и там для изменения, но это работает как ожидалось.

Answer 2

Поэтому, если я правильно понимаю, вы хотите текст внутри элементов списка, чтобы обернуть, но не сам меню, это правильно? Так что это выглядит что-то вроде:

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

Но не так выглядеть как:

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

Если это так, вы пытались установить nowrap на самом деле ul вместо предметов списка, поскольку это ul Что вы пытаетесь сделать не обернуть? Затем установите ширину для элементов списка, чтобы они обрушились, чтобы соответствовать этой ширине.