CSS溢出:隐藏隐藏列表的子弹?

问题描述 投票:23回答:3

我刚刚发现了一些有趣的东西。假设我有一个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影响的编号有点不合逻辑吗?为什么会这样?这是有意的行为吗?它是在规范中还是只是有些奇怪的人忘了处理?

html css overflow html-lists
3个回答
40
投票

据我所知,这是默认行为,如果list-style-positionoutsideul的子弹和ol的数字没有显示。至少在Firefox中,我记得以前在旧版本中看过它。


1
投票

浏览器将默认边距和填充添加到列表中。首先尝试使用reset.css删除默认样式,这样您就可以开始干净清爽而不会出现意外行为。搜索Eric Meyer的重置。希望能帮助到你。


0
投票

当我在ul的左侧没有足够的填充时,我看到我的子弹/数字被剪掉了。尝试添加一点,看看是否有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.