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

min*_*gos 24 html css overflow html-lists

我刚刚发现了一些有趣的东西.假设我有一个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>
Run Code Online (Sandbox Code Playgroud)

这个CSS:

li {
    white-space: nowrap;
    overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud)

正如预期的那样,最后一个项目中的长文本在离开容器的宽度时确实被删除了.但!列表项目编号也受overflow属性影响,不会显示.

但是,像这样修改CSS:

ol {
    overflow: hidden;
}
li {
    white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)

按预期工作(文本不会出自容器,但会显示列表项).至少对于Firefox 4 beta10来说,这一切都是如此.

难道你不认为受此影响的编号overflow有点不合逻辑吗?为什么会这样?这是有意的行为吗?它是在规范中还是只是有些奇怪的人忘了处理?

jer*_*oen 40

这是默认行为,据我所知,如果list-style-positionoutside,则一个ul和一些数字的子弹ol不显示.至少在Firefox中,我记得以前在旧版本中看过它.

  • 啊哈!好的!我只是检查了它,确实,`list-style-position:inside`使子弹出现在`li`中,并且它们不再受到`overflow`的影响.我怀疑类似的东西,但不确定.谢谢. (14认同)