html - quitar - Desbordamiento de CSS: ¿ocultas las viñetas de una lista?

quitar viñetas li css

Question

Acabo de notar algo gracioso. Digamos que tengo una lista de 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>

Y este CSS:

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

El texto largo en el último elemento se corta cuando se sale del ancho del contenedor, como se esperaba. ¡PERO! Los números de los elementos de la lista también se ven afectados por la propiedad de overflow y no se muestran.

Sin embargo, modificando el CSS de esta manera:

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

funciona según lo previsto (el texto no saldrá del contenedor, pero se muestran los elementos de la lista). Al menos todo esto es cierto para Firefox 4 beta10.

¿No crees que la numeración afectada por el overflow es un poco ilógica? ¿Por qué sucedería eso? ¿Es intende el comportamiento? ¿Está en la especificación o es solo una rareza que alguien olvidó tratar?

Answer 1

Este es el comportamiento predeterminado, según tengo entendido, si la list-style-position está outside , las balas de una ul y los números de un ol no se muestran. Al menos en Firefox, recuerdo haberlo visto antes en versiones anteriores.

Answer 2

He visto mis balas / números recortarse cuando no hay suficiente relleno en el lado izquierdo de la ul. Intenta agregar un poco y ver si eso ayuda.

Answer 3

Los navegadores agregan margen predeterminado y relleno a las listas. Trate de usar un reset.css primero para eliminar los estilos predeterminados de manera que pueda comenzar de nuevo sin un comportamiento inesperado. Haga una búsqueda para el reinicio de Eric Meyer. Espero eso ayude.