CSS overflow:hidden hiding a list's bullets?

mingos picture mingos · Jan 30, 2011 · Viewed 11.2k times · Source

I've just noticed something funny. Let's say I have a HTML list:

<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>

And this CSS:

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

The long text in the last item is indeed hacked off when it goes off the container's width, as expected. BUT! The list item numbers are affected by the overflow property too and are not shown.

However, modifying the CSS like this:

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

works as intended (text won't go out of the container, but list items are shown). At least all this is true for Firefox 4 beta10.

Don't you think that the numbering being affected by the overflow is a bit illogical? Why would that happen? Is it intende behaviour? Is it in the specification or is it just some oddity someone forgot to deal with?

Answer

jeroen picture jeroen · Jan 30, 2011

This is the default behavior as far as I´m aware, if the list-style-position is outside, bullets of an ul and numbers of an ol do not show. At least in Firefox, I remember seeing it before in older versions.