CSS overflow:hidden会隐藏列表的标记吗？

Question

CSS overflow:hidden会隐藏列表的标记吗？

32

我注意到了一件有趣的事情。假设我有一个HTML列表：

<ol>
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</li>
</ol>

还有这段CSS：

li {
    white-space: nowrap;
    overflow: hidden;
}

当最后一项文本超出容器的宽度时，确实会像预期的那样被截断。但是！列表项的编号也受到了 overflow 属性的影响，并且不会显示。

但是，通过这种方式修改CSS：

ol {
    overflow: hidden;
}
li {
    white-space: nowrap;
}

看起来效果良好（文本不会溢出容器，但是列表项仍然显示）。至少在Firefox 4 beta10上是这样的。

你不觉得编号受到overflow的影响有点不合逻辑吗？为什么会发生这种情况？这是预期的行为吗？这是否包含在规范中或者只是某个被忽略的怪异问题？

- mingos

这是否是所有beta10版本的行为？或者你也在其他浏览器上进行了测试吗？ - Caspar Kleijne

不，我没有测试，因为我并不真的在意修复这个问题（在ol上设置overflow就可以解决问题了，我只是好奇）。 - mingos

4个回答

1

浏览器会为列表添加默认的边距和填充。建议先使用reset.css来移除默认样式，这样您就可以干净、清新地开始编写代码，避免出现意外行为。可以搜索Eric Meyer的reset。希望对您有所帮助。

- Jim Amos

0

当 ul 左侧没有足够的填充时，我会发现我的项目符号/编号被裁剪。尝试添加一点填充看看是否有帮助。

- rcravens

不完全是。在我的情况下，有40像素的填充。项目符号完全位于ol的填充内部。我认为这更多与li元素的某些奇怪行为有关（我认为它们的项目符号是在实际的li外呈现的）...我刚刚回答了我的问题吗？ - mingos

有点类似。请查看list-style-position。 - Jim Amos

-2

我解决问题的方法是，将“li”标签的内容包装到“div”标签中，并添加样式“overflow: hidden”。

- Alexander krn

div 不是列表标签的有效子元素，无论是 ol、ul 还是 dl。 - sevenseacat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jeroen · Accepted Answer

据我所知，如果list-style-position为outside，则无论是ul的符号还是ol的数字都不会显示。至少在Firefox浏览器中，我记得在旧版本中看到过这种情况。