Desbordamiento — CSS: Posicionamiento de elementos

• Entendiendo el desbordamiento
  • Cómo controlar el desbordamiento
  • Usar barras de desplazamiento
• Manejo del desbordamiento de texto
  • Mostrar "..." en textos largos
• Desbordamiento en dispositivos móviles

Cuando trabajamos con diseño web, es común encontrarnos con un problema llamado desbordamiento. Esto ocurre cuando el contenido dentro de un bloque o contenedor es más grande que el espacio disponible, y el navegador tiene que decidir qué hacer con ese contenido extra.

En esta lección, vamos a explorar cómo manejar el desbordamiento con CSS paso a paso.

Entendiendo el desbordamiento

Imagina que tienes un contenedor con un tamaño fijo pero el contenido dentro es demasiado grande para caber en él. En este caso, el contenido podría salirse del contenedor y afectar el diseño del sitio web.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

En este ejemplo, el texto dentro del section es más alto que el espacio disponible, lo que causa que el contenido se desborde del bloque.

Cómo controlar el desbordamiento

CSS nos ofrece la propiedad overflow, que nos permite decidir qué sucede cuando el contenido es más grande que el contenedor. Algunas opciones son:

• visible (valor por defecto): el contenido sigue expandiéndose fuera del contenedor.
  
• hidden: oculta el contenido desbordado, pero no lo hace accesible.
  
• scroll: agrega barras de desplazamiento siempre, sin importar si el contenido lo necesita o no.
  
• auto: solo agrega barras de desplazamiento cuando realmente son necesarias.
  

Ocultar contenido con hidden

Si el desbordamiento no es importante y queremos ocultarlo, podemos usar overflow: hidden.

section {
  overflow: hidden;
}

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

El contenido extra desaparece, pero no podemos acceder a él. En algunos casos, esto es útil, por ejemplo, para ocultar elementos temporales en una interfaz.

Usar barras de desplazamiento

Podemos permitir que los usuarios accedan al contenido extra usando scroll o auto. Veamos cómo funciona cada uno:

• overflow: scroll; Siempre muestra las barras de desplazamiento.

• overflow: auto; Añade barras de desplazamiento solo si son necesarias.

section {
  overflow: auto;
}

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Al usar auto, solo aparece una barra de desplazamiento si el contenido realmente la necesita. Esto es mejor para una experiencia de usuario más limpia.

Manejo del desbordamiento de texto

En algunas situaciones, no queremos manejar todo el bloque, sino solo ciertos textos dentro de él. Un caso típico es la vista previa de un mensaje en un chat.

Así es como se ve inicialmente con poco contenido:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Pero si el mensaje es muy largo, el diseño se rompe:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Para solucionar esto, podemos aplicar white-space: nowrap; para evitar que el texto se divida en varias líneas y, luego, usar overflow-x: hidden; para ocultar el contenido sobrante.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Ahora el texto no se divide en varias líneas y se mantiene dentro del diseño.

Mostrar "..." en textos largos

Si queremos indicar que el contenido sigue pero no hay espacio para mostrarlo, podemos usar text-overflow: ellipsis;.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Ahora vemos "..." al final de los textos largos, lo que indica que hay más contenido.

Desbordamiento en dispositivos móviles

Cuando diseñamos para móviles, es importante asegurarnos de que el contenido no se desborde de la pantalla. Algunas buenas prácticas incluyen:

📱 Usar max-width: 100% en imágenes y contenedores para evitar que se salgan del viewport.

📱 Aplicar overflow: auto; en secciones con contenido largo para permitir el desplazamiento sin romper el diseño.

📱 Utilizar word-wrap: break-word; o overflow-wrap: break-word; en textos largos para evitar que se extiendan fuera del contenedor en pantallas pequeñas.

📱 También puedes usar media queries para ajustar el comportamiento del desbordamiento en distintos tamaños de pantalla:

Las media queries permiten cambiar los estilos CSS dependiendo del ancho del dispositivo. Esto es útil para manejar el desbordamiento de contenido en móviles y mejorar la experiencia del usuario.

⏬ Ejemplo

@media (max-width: 480px) {
  section {
    overflow: auto;
    max-height: 300px; /* Limita la altura en pantallas pequeñas */
  }

  p {
    font-size: 14px; /* Reduce el tamaño del texto para evitar desbordamiento */
    word-wrap: break-word;
  }
}

¿Qué hace este código?

• Aplica overflow: auto; solo cuando la pantalla mide 480px o menos.
• Limita la altura del section a 300px en móviles para evitar que crezca demasiado.
• Reduce el tamaño del texto (font-size: 14px) para que encaje mejor en pantallas pequeñas.
• Asegura que las palabras largas se rompan correctamente (word-wrap: break-word).

Esto asegura que el contenido siempre se mantenga dentro de los límites del diseño, mejorando la experiencia del usuario.

Materiales adicionales

1. Especificación del módulo CSS Overflow Module Level 3