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