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
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 conoverflow: clip
se recorta al cuadro de padding del elemento. La diferencia entreclip
yhidden
es que la palabra claveclip
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.
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í.
scroll-behavior
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
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?
La propiedad overflow
acepta 2 palabras clave. ¿Para qué eje corresponde la primera palabra clave?
¿Qué espacio en el modelo de cuadro ocupan las barras de desplazamiento cuando se muestran y se alinean?
overlay
se superpondrán con el padding, y cuando se encuentre en el modo inline
, se agregarán al padding.Para capturar el impulso adicional del desplazamiento en un desplazador implícito anidado, ¿qué propiedad usarías?
scroll-behavior
scroll-hint
overscroll-behavior
contain
, se capturará el desplazamiento.scroll-padding
overscroll-effect
Recursos
Desbordamiento y pérdida de datos en CSS de Smashing Magazine