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?

回答1:

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.

回答2:

Browsers add default margin and padding to lists. Try using a reset.css first to remove default styles that way you can start clean and fresh without unexpected behavior. Do a search for Eric Meyer's reset. Hope it helps.

回答3:

I've seen my bullets/numbers get clipped when there is not enough padding on the left side of the ul. Try adding a bit and see if that helps.

来源：https://stackoverflow.com/questions/4843495/css-overflowhidden-hiding-a-lists-bullets