Cómo utilizar la propiedad overflow de CSS

La propiedad overflow en CSS es una característica clave cuando trabajamos con el diseño de cajas y contenedores en una página web. Esta propiedad nos permite controlar lo que sucede cuando el contenido de un elemento es más grande que el área visible definida para él.

A continuación, explicaré cómo funciona esta propiedad, en qué situaciones utilizarla y detallaré recomendaciones para un uso efectivo en proyectos web.

¿Qué es la propiedad overflow en CSS?

La propiedad overflow determina cómo manejar el contenido desbordado en un contenedor cuando su tamaño excede el área visible. Esta propiedad puede tomar varios valores que ajustan el comportamiento de visualización del contenido.

Los valores más comunes de overflow:

1. visible: Este es el valor por defecto. El contenido desbordado se muestra fuera del área delimitada por el contenedor sin recortar ni ocultar nada.
2. hidden: El contenido desbordado se oculta. Solo el contenido dentro del área del contenedor será visible, lo que significa que cualquier contenido adicional será invisible.
3. scroll: Fuerza la aparición de una barra de desplazamiento (scroll) para permitir al usuario ver todo el contenido, incluso si este no desborda el contenedor.
4. auto: Añade una barra de desplazamiento solo si el contenido realmente desborda el contenedor. Este valor es ideal cuando no se desea mostrar scroll innecesario.

Ejemplo básico:

<div class="contenedor">
  Este es un texto muy largo que desborda el contenedor.
</div>

<style>
  .contenedor {
    width: 200px;
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
  }
</style>

En este caso, el contenido que sobrepasa el área definida de 200px por 100px quedará oculto debido al uso de overflow: hidden. Para ilustrar el ejemplo empleamos un borde, pero también es posible notar el lo que ocurre si establecemos un fondo.

Situaciones comunes para usar overflow

La propiedad overflow puede ser una opción eficiente para gestionar textos desbordados en cajas pequeñas. Imaginemos que tenemos una tarjeta de producto con una cantidad de texto variable. En algunos casos, el texto puede ser demasiado largo y desbordar el contenedor. Aquí, el uso de overflow: hidden o overflow: auto evitará que el contenido se salga de los límites, proporcionando una experiencia de usuario más limpia.

Crear contenedores con barras de desplazamiento puede ser otro uso práctico. Cuando necesitamos mostrar una lista larga dentro de un área limitada, overflow: scroll o overflow: auto es útil. Esto asegura que el usuario pueda desplazarse para ver todo el contenido, en lugar de tener una página desorganizada con contenido desbordado.

Ejemplo de scroll:

<div class="scrollable">
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <!-- Más elementos -->
  </ul>
</div>

<style>
  .scrollable {
    width: 300px;
    height: 150px;
    overflow: auto;
    border: 1px solid black;
  }
</style>

Una recomendación muy importante es evitar barras de desplazamiento innecesarias. El valor overflow: auto es ideal en situaciones donde no siempre se necesita el scroll. Si el contenido cabe dentro del contenedor, no se mostrará ninguna barra de desplazamiento, pero si no cabe, se activará automáticamente.

Los diseños con modales o menús desplegables son otras características de diseño donde deberíamos controlar el overflow. Cuando trabajamos con ventanas modales o menús flotantes, a menudo es necesario que los elementos dentro de estas ventanas no desborden. overflow: hidden es útil para asegurarse de que no aparezcan barras de desplazamiento dentro de la ventana modal, lo que puede generar una mala experiencia visual.

Recomendaciones para usar overflow

A continuación veremos algunas recomendaciones a la hora de usar el overflow:

1. Usar overflow: auto en vez de scroll cuando sea posible. La propiedad auto asegura que solo aparezca una barra de desplazamiento si es necesario, lo que evita agregar barras innecesarias y mejora la estética de la página.
2. Combinar con text-overflow para textos largos. Si manejamos contenido de texto que se desborda, considera usar la propiedad text-overflow: ellipsis; para cortar el texto con puntos suspensivos cuando sobrepase el contenedor. Ejemplo:

   .caja-texto {
     width: 150px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

3. Evitar el uso de overflow: visible en diseños con limitaciones espaciales. Si trabajamos con un diseño con elementos ajustados, overflow: visible puede causar problemas visuales ya que el contenido desbordado puede sobreponerse a otros elementos de la página.
4. Controlar el desbordamiento en dispositivos móviles. Sn pantallas pequeñas, el desbordamiento puede ser un problema mayor. Resulta importante asegurarnos que los contenedores sean responsivos. Para esto es posible aplicar la propiedad overflow: auto para garantizar que el contenido sea accesible incluso en pantallas pequeñas.
5. Considerar la accesibilidad. Las barras de desplazamiento deben ser claras para los usuarios. Es importante asegurarnos que sean visibles en navegadores y dispositivos, especialmente cuando el contenido desborda. Para elementos ocultos, podemos considerar ofrecer alternativas como botones de «ver más» para usuarios que puedan no notar que deben desplazarse.

En conclusión

La propiedad overflow es esencial en CSS para controlar cómo se muestra el contenido desbordado dentro de un contenedor. Desde manejar el texto en tarjetas hasta crear áreas desplazables, es una herramienta fundamental que mejora la experiencia del usuario y la coherencia visual de un sitio web.

Con las recomendaciones adecuadas, podremos aplicar overflow en el momento correcto y evitar problemas de diseño en tus proyectos web.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.