我注意到了一件有趣的事情。假设我有一个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
的影响有点不合逻辑吗?为什么会发生这种情况?这是预期的行为吗?这是否包含在规范中或者只是某个被忽略的怪异问题?
ol
上设置overflow
就可以解决问题了,我只是好奇)。 - mingos