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 conoverflow: clip
se recorta en el cuadro de padding del elemento. La diferencia entreclip
yhidden
es que la palabra claveclip
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
¿El desbordamiento de texto y el desbordamiento de elementos son iguales?
La propiedad overflow
acepta 2 palabras clave. ¿Para qué eje corresponde la primera palabra clave?
¿Qué espacio del modelo de cuadro consumen las barras de desplazamiento cuando se muestran y se insertan en línea?
¿Qué propiedad usarías para atrapar el momento adicional del desplazamiento en un control deslizante implícito anidado?
scroll-padding
overscroll-behavior
scroll-hint
overscroll-effect
scroll-behavior