Menú ampliado

The CSS Podcast - 034: Overflow

Cuando el contenido se extiende más allá de su elemento superior, existen muchas opciones para controlarlo. Puedes desplazarte para agregar espacio adicional, recortar los bordes desbordantes, indicar el corte con puntos suspensivos y mucho más. El desbordamiento es especialmente importante cuando se desarrolla para aplicaciones de teléfonos y varios tamaños de pantalla.

Existen dos opciones de recorte diferentes en CSS: text-overflow ayudará con líneas individuales de texto, y las propiedades overflow ayudarán a controlar el desbordamiento en el modelo de cuadro.

Desbordamiento de una sola línea con text-overflow

Usa la propiedad text-overflow en cualquier elemento que contenga nodos de texto, por ejemplo, un párrafo, <p>. Especifica cómo aparece el texto cuando no cabe en el espacio disponible del elemento. Todo el texto HTML visible en una página se encuentra en nodos de texto. Para usar text-overflow, necesitas una sola línea de texto sin unir, por lo que también debes establecer overflow en hidden y tener un valor white-space que evite la unión.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Usa propiedades de desbordamiento

Las propiedades de desbordamiento se establecen en un elemento para controlar lo que sucede cuando sus elementos secundarios necesitan más espacio del que tienen disponible. Esto puede ser intencional, como en un mapa interactivo como Google Maps, en el que un usuario se desplaza lateralmente por una imagen grande recortada a un tamaño específico. También puede ser no intencional, como en una aplicación de chat en la que el usuario escribe un mensaje largo que no cabe en el cuadro de texto.

Puedes considerar el desbordamiento en dos partes. El elemento superior tiene un espacio firmemente restringido que no cambiará. Puedes pensar en esto como una ventana. Los elementos secundarios son contenido que necesita más espacio del elemento superior. Puedes pensar en esto como lo que ves a través de la ventana. La administración del desbordamiento ayudará a guiar cómo la ventana enmarcará este contenido.

Desplazamiento en el eje vertical y horizontal

La propiedad overflow-y controla el desbordamiento físico a lo largo del eje vertical de la ventana de visualización del dispositivo, por lo que se desplaza hacia arriba y hacia abajo.

Los controles de la propiedad overflow-x se desbordan a lo largo del eje horizontal del viewport del dispositivo, por lo que se desplazan hacia la izquierda y la derecha.

Propiedades lógicas para la dirección de desplazamiento

Las propiedades overflow-inline y overflow-block establecen el desbordamiento según la dirección del documento y el modo de escritura.

La abreviatura overflow

La abreviatura overflow establece los estilos overflow-x y overflow-y en una sola línea:

overflow: hidden scroll;

Si se especifican dos palabras clave, la primera se aplica a overflow-x y la segunda a overflow-y. De lo contrario, tanto overflow-x como overflow-y usan el mismo valor.

Valores

Analicemos con más detalle los valores y las palabras clave disponibles para las propiedades overflow.

overflow: visible (predeterminada)

Sin configurar la propiedad, overflow: visible es el valor predeterminado para la Web. Esto garantiza que el contenido nunca se oculte de forma involuntaria y siga los principios básicos de "nunca ocultar el contenido" o "diseños seguros de diseños precisos".

overflow: hidden

Con overflow: hidden, el contenido se recorta en la dirección especificada y no se proporcionan barras de desplazamiento para mostrarlo.

overflow: scroll

overflow: scroll habilita las barras de desplazamiento para permitir que los usuarios se desplacen por el contenido. Incluso si el contenido no se desborda en este momento, las barras de desplazamiento estarán presentes. Esta es una excelente manera de reducir el cambio de diseño en el futuro si un contenedor puede desplazarse en el futuro en función, por ejemplo, del cambio de tamaño, y preparar visualmente al usuario para las áreas desplazables.

overflow: clip

Al igual que overflow: hidden, el contenido con overflow: clip se recorta en el cuadro de padding del elemento. La diferencia entre clip y hidden es que la palabra clave clip también prohíbe todo el desplazamiento, incluido el desplazamiento programático.

overflow: auto

Por último, el valor más usado, overflow: auto. Esto respeta las preferencias del usuario y muestra barras de desplazamiento si es necesario, pero las oculta de forma predeterminada y da responsabilidad del desplazamiento al usuario y al navegador.

Desplazamiento y desbordamiento

Muchos de estos comportamientos de overflow presentan una barra de desplazamiento, pero hay algunos comportamientos y propiedades de desplazamiento específicos que pueden ayudarte a controlar el desplazamiento en tu contenedor de desbordamiento.

Desplazamiento y accesibilidad

Es importante asegurarse de que el área desplazable pueda aceptar el enfoque para que un usuario del teclado pueda usar la tecla Tab para ir al cuadro y, luego, usar las teclas de flecha para desplazarse.

Para permitir que un cuadro de desplazamiento acepte el enfoque, agrega tabindex="0", un nombre con el atributo aria-labelledby y un atributo role adecuado. Por ejemplo:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Luego, se puede usar CSS para indicar que el cuadro tiene el foco, con la propiedad outline para dar una pista visual de que ahora se podrá desplazar.

En Cómo usar CSS para aplicar la accesibilidad, Adrian Roselli demuestra cómo el CSS puede ayudar a evitar regresiones de accesibilidad. Por ejemplo, para activar solo el desplazamiento y agregar el indicador de enfoque si se usan los atributos correctos. Las siguientes reglas solo permitirán que el cuadro se pueda desplazar si tiene los atributos tabindex, aria-labelledby y role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Posicionamiento de la barra de desplazamiento dentro del modelo de cuadro

Las barras de desplazamiento ocupan espacio dentro del cuadro de padding y pueden competir por el espacio si inline y no overlaid. En el módulo del modelo de cuadro, se explica más sobre esta posible fuente de cambio de diseño.

root-scroller vs implicit-scroller

Quizás notes que algunos desplazadores tienen un comportamiento de "deslizar hacia abajo para actualizar" y otros comportamientos especiales, en especial cuando se desarrollan aplicaciones híbridas y de dispositivos móviles. Este comportamiento de desplazamiento se produce en el control deslizante raíz. Solo hay un control deslizante raíz en una página. De forma predeterminada, documentElement es el control de desplazamiento raíz de la página. Sin embargo, si cambias el elemento que es el control de desplazamiento raíz, los comportamientos especiales se pueden aplicar a controles de desplazamiento que no sean documentElement. Llamamos a este nuevo control de desplazamiento el control de desplazamiento raíz implícito.

Para crear un control de desplazamiento raíz, puedes usar algo llamado promoción del control de desplazamiento. Para ello, coloca un contenedor como fijo, asegúrate de que cubra todo el viewport y que el índice z esté en la parte superior con un control de desplazamiento. Experimenta un control deslizante raíz en comparación con un control deslizante implícito anidado aquí.

scroll-behavior

scroll-behavior te permite habilitar el desplazamiento a los elementos controlado por el navegador. Esto te permite especificar cómo se controla la navegación en la página, como .scrollTo() o los vínculos.

Esto es especialmente útil cuando se usa con prefers-reduced-motion para especificar el comportamiento de desplazamiento según la preferencia del usuario.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Si alguna vez llegaste al final de una superposición modal, continuaste desplazándote y la página detrás de la superposición se movió, esto es el encadenamiento de desplazamiento o la propagación al contenedor de desplazamiento superior. La propiedad overscroll-behavior te permite evitar que el desplazamiento desbordado se filtre en un contenedor superior (llamado encadenamiento de desplazamiento).

Verifica tu comprensión

Pon a prueba tu conocimiento sobre el desbordamiento

Recursos

Overflow And Data Loss In CSS de Smashing Magazine