Para qué sirven list-style-type: none; y overflow: hidden;

 

¿Para qué sirven list-style-type: none; y overflow: hidden;?

Te explico cada uno:

---

list-style-type: none;

¿Qué hace?

Elimina los marcadores (viñetas o números) de las listas HTML (<ul> o <ol>).

Ejemplo básico:

css

ul {
    list-style-type: none;
}

Antes y después:

Sin la propiedad:

• Elemento 1

• Elemento 2

• Elemento 3

Con la propiedad:
Elemento 1
Elemento 2
Elemento 3

Usos comunes:

1. Menús de navegación - Cuando quieres usar tus propios estilos para los items

2. Listas personalizadas - Para agregar tus propios íconos como viñetas

3. Diseños limpios - Cuando no quieres los puntos por defecto

Ejemplo práctico con menú:

css

.menu {
    list-style-type: none;  /* Quita los puntos */
    padding: 0;              /* Quita el padding por defecto */
    margin: 0;               /* Quita el margen por defecto */
}

.menu li {
    display: inline-block;   /* Coloca los items en horizontal */
    margin-right: 20px;
}

---

overflow: hidden;

¿Qué hace?

Controla qué sucede cuando el contenido de un elemento es más grande que su contenedor. Con hidden, todo el contenido que se desborda se oculta.

Ejemplo básico:

css

.contenedor {
    width: 200px;
    height: 100px;
    overflow: hidden;  /* Oculta lo que sobresale */
    border: 1px solid black;
}

Visualmente:

text

┌─────────────────┐
│Texto que se     │
│muestra dentro   │
│del contenedor   │
└─────────────────┘
(El texto que sigue está oculto porque no cabe)

Usos comunes:

1. Contener floats - Soluciona problemas de elementos flotantes:

css

.contenedor {
    overflow: hidden;  /* Hace que el contenedor reconozca elementos flotantes */
}

2. Crear efectos visuales - Como recortar imágenes:

css

.imagen-redondeada {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;  /* La imagen se recorta en círculo */
}

3. Evitar desbordamientos - En diseños responsivos:

css

.texto-largo {
    white-space: nowrap;  /* Evita que el texto salte de línea */
    overflow: hidden;     /* Oculta lo que no cabe */
    text-overflow: ellipsis;  /* Agrega "..." al final */
}

Diferencia con otros valores de overflow:

• overflow: visible; (por defecto) - El contenido sobresale

• overflow: hidden; - Se oculta lo que sobresale

• overflow: scroll; - Agrega barras de scroll

• overflow: auto; - Agrega scroll solo si es necesario

---

Ejemplo combinado:

html

<ul style="list-style-type: none; width: 150px; overflow: hidden;">
    <li>Texto muy largo que no cabe en 150px y se ocultará</li>
    <li>Otro elemento</li>
</ul>

¿Te gustaría ver algún ejemplo más específico de alguna de estas propiedades?