Menú ampliado

Podcast de CSS - 034: Desbordamiento

Cuando el contenido se extiende más allá de su elemento superior, hay muchas opciones para controlarlo. Puedes desplazarte para agregar espacio adicional, recortar los bordes desbordantes, indicar el corte con puntos suspensivos y mucho más. Es especialmente importante tener en cuenta el desbordamiento cuando se desarrollan aplicaciones para 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 de una página se encuentra en nodos de texto. Para usar text-overflow, necesitas una sola línea de texto separada, por lo que también debes establecer overflow en hidden y tener un valor white-space que evite el ajuste.

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

Usa propiedades de menú ampliado

Las propiedades de desbordamiento se establecen en un elemento para controlar lo que sucede cuando sus elementos secundarios necesitan más espacio del que tiene 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 limitado que no cambiará. Puedes considerarlo como una ventana. Los elementos secundarios son contenido que quieren más espacio del elemento superior. Es como mirar por la ventana. La administración del desbordamiento ayudará a determinar cómo la ventana enmarca este contenido.

Desplazamiento en los ejes vertical y horizontal

La propiedad overflow-y controla el desbordamiento físico a lo largo del eje vertical del viewport 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

Navegadores compatibles

• ×
• ×
• (69)
• ×

Origen

Las propiedades overflow-inline y overflow-block establecen el desbordamiento en función de 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 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, overflow-x y 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 “no ocultar nunca 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 que los usuarios se desplacen por el contenido. Incluso si el contenido no se desborda actualmente, se mostrarán barras de desplazamiento. Esta es una excelente manera de reducir los cambios de diseño futuros si un contenedor se puede desplazar en el futuro en función 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 al 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 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.

Nota: Si usas la propiedad overflow con un valor distinto de visible, se crea un contexto de formato de bloque.

Desplazamiento y menú ampliado

Muchos de estos comportamientos overflow introducen 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, de modo que un usuario que usa el teclado pueda presionar Tab para acceder 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 está enfocado y usar 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 CSS puede ayudar a evitar las regresiones de accesibilidad. Por ejemplo, para solo activar el desplazamiento y agregar el indicador de enfoque si se usan los atributos correctos. Las siguientes reglas solo hará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 cuadros

Las barras de desplazamiento ocupan espacio dentro del cuadro de padding y pueden competir por espacio si son inline y no overlaid. El módulo de modelo de caja amplía esta posible fuente de cambio de diseño.

Desplazamiento raíz frente a desplazamiento implícito

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 móviles. Este comportamiento de desplazamiento ocurre en la barra de desplazamiento raíz. Solo hay un desplazador raíz en una página. De forma predeterminada, documentElement es la barra de desplazamiento raíz de la página. Sin embargo, cuando se cambia el elemento que es la barra de desplazamiento raíz, se pueden aplicar comportamientos especiales a otras personas que no sean documentElement. De esta forma, llamamos a esta barra de desplazamiento raíz implícita.

Para crear un desplazador raíz, puedes usar algo llamado promoción de desplazamiento. Para ello, posiciona un contenedor como fijo y asegúrate de que cubra todo el viewport y que aparezca el índice z en la parte superior con un desplazador. Experimenta una barra de desplazamiento raíz en comparación con una barra de desplazamiento implícita anidada aquí.

. En el video, se muestra un desplazador raíz con comportamiento de rebote y nuevas funciones de diseño:
en comparación con el desplazamiento de una barra de desplazamiento implícito sin comportamiento de desplazamiento mejorado.

scroll-behavior

Navegadores compatibles

• (61)
• (79)
• (36)
• 15,4

Origen

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

Esto resulta particularmente útil cuando se usa con prefers-reduced-motion para especificar el comportamiento de desplazamiento según las preferencias del usuario.

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

comportamiento de sobredesplazamiento

Navegadores compatibles

• (63)
• (18)
• (59)
• (16)

Origen

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

Verifica tus conocimientos

Pon a prueba tu conocimiento sobre el desbordamiento

¿El desbordamiento de texto y el desbordamiento de elementos son lo mismo?

verdadero

El desbordamiento de texto es especial cuando se compara con el desbordamiento de elementos.

falso

El desbordamiento de texto suele referirse al desbordamiento intercalado, en el que el desbordamiento de elementos se relaciona con el desbordamiento de bloques.

La propiedad overflow acepta 2 palabras clave. ¿Para qué eje corresponde la primera palabra clave?

horizontal

🎉

vertical

Casi siempre, cuando se pasan dos valores abreviados, el primero es horizontal.

¿Qué espacio en el modelo de cuadro ocupan las barras de desplazamiento cuando se muestran y se alinean?

cuadro de contenido

Vuelve a intentarlo.

cuadro de relleno

Las barras de desplazamiento en el modo overlay se superpondrán con el padding, y cuando se encuentre en el modo inline, se agregarán al padding.

cuadro de borde

Vuelve a intentarlo.

cuadro de margen

Vuelve a intentarlo.

Para capturar el impulso adicional del desplazamiento en un desplazador implícito anidado, ¿qué propiedad usarías?

scroll-behavior

Vuelve a intentarlo.

scroll-hint

Vuelve a intentarlo.

overscroll-behavior

Si estableces esta propiedad en contain, se capturará el desplazamiento.

scroll-padding

Vuelve a intentarlo.

overscroll-effect

Vuelve a intentarlo.

Recursos

Desbordamiento y pérdida de datos en CSS de Smashing Magazine