CSS overflow:hidden cacher une liste de balles?

Je viens de m'apercevoir de quelque chose de drôle. Disons que j'ai une liste 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>

Et ce CSS:

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

Le long texte dans le dernier élément est en effet hacked off quand il s'en va du conteneur largeur, comme prévu. MAIS! La liste des numéros d'articles sont concernés par la overflow bien trop et ne sont pas indiquées.

Cependant, la modification de la CSS comme ceci:

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

fonctionne comme prévu (texte ne fait pas sortir du conteneur, mais les éléments de la liste sont affichés). Au moins tout cela est vrai pour Firefox 4 beta10.

Ne pensez-vous pas que la numérotation d'être affectée par le overflow est un peu illogique? Pourquoi cela devrait-il se produire? Est-il intende comportement? Est-il dans la spécification ou est-ce juste quelque bizarrerie quelqu'un a oublié de traiter?

  • est-ce tous les 4 beta10 comportement? Ou avez-vous testé sur d'autres navigateurs aussi bien?
  • Non, je n'ai pas fait de test car je n'ai pas vraiment de soins sur la résolution de ce (réglage overflow sur le ol fait le tour, je suis juste curieux)
InformationsquelleAutor mingos | 2011-01-30
  1. 40

    C'est le comportement par défaut autant que Im courant, si la list-style-position est outside, balles d'un ul et les numéros de ol ne montrent pas. Au moins dans Firefox, je me souviens avoir vu avant dans les anciennes versions.

    • Aha! Bon! Je viens de vérifier et en effet, list-style-position:inside rend les balles apparaissent à l'intérieur de la li, et ils ne sont pas affectés par la overflow plus. Je soupçonne quelque chose de similaire, mais n'en était pas sûr. Je vous remercie.
    InformationsquelleAutor jeroen
  2. 1

    Navigateurs ajouter de marge par défaut et le rembourrage pour les listes. Essayez d'utiliser un reset.css d'abord à supprimer les styles par défaut de cette façon, vous pouvez commencer à frais et propre sans un comportement inattendu. Faire une recherche pour Eric Meyer à zéro. Espérons que cela aide.

    • J'utilise une réinitialisation déjà, mais merci néanmoins :).
    InformationsquelleAutor Jim Amos
  3. 0

    J'ai vu mes puces/numéros d'être coupés quand il n'y a pas assez de rembourrage sur le côté gauche de l'ul. Essayez d'ajouter un peu et voir si cela aide.

    • Pas vraiment. Dans mon cas particulier, il n'y a 40px de rembourrage. Les balles sont entièrement à l'intérieur de la ol's rembourrage. Je pense qu'il a plus à voir avec un comportement étrange de li éléments (je pense que leurs balles sont rendus en dehors de la li)... Ai-je viens de répondre à ma question?
    • En quelque sorte. Découvrez list-style-position
    InformationsquelleAutor rcravens