css - 溢出无助于隐藏流动链接

Question

这里我有一个 jquery 菜单，它工作得很好。但是我给了它一个 400px 的固定宽度，所以如果我向主 ul 添加超过一定数量的链接，它们将在下一行流动，这是绝对不希望的。

我尝试了 overflow:hidden 和 line-height 以某种方式解决了这个问题，但无论如何都没有结果。

这是菜单:http://jsfiddle.net/b5Wdc/

如您所见，红色链接在下一行流动，这就是问题所在。

在这种情况下我应该写什么来 overflow hidden 的链接？

谢谢大家。

Answer 1

从我们在问题评论中的对话来看，您的菜单似乎是完全固定的，任何“额外”元素都应始终隐藏，并且不需要动态显示或换行。因此，您可以只使用 CSS 隐藏所有您知道不适合的菜单项。由于菜单项的宽度为 99px 而菜单为 400px，您知道你只会显示 4 个元素。这个纯 CSS 将隐藏其余部分:

.HeadMenu #nav > li:nth-child(n+5) {
    display:none;
}

但是 nth-child 至少需要 IE8 CSS 选择器支持。

由于您在问题中提到了 jQuery，如果您需要通过以下方式支持 IE8，您可以在 JavaScript 中完成相同的操作:

$('.HeadMenu #nav > li:nth-child(n+5)').hide()

或者，保留 CSS 解决方案(因为它更干净)并使用 selectivizr为 IE8 带来 nth-child 选择器支持。