Search code examples
htmlcssoverflowhtml-lists

CSS overflow:hidden hiding a list's bullets?

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?

Solution

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