与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 或点击 的 Timbru博客 的

相反，两个链路最终粘在一起，如：

访问我的网站的点击 的加布里埃尔拉迪奇.COM 或 Timbru博客（罗马尼亚） 的

有没有一个很好的办法告诉Safari浏览器，Chrome和其他人制止抢夺人的胳膊肘？

感谢您的帮助。

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？然后设置列表项的宽度，使得它们将包装到适合该宽度。