Este artículo demuestra el método para evitar que el contenido se desborde y habilitar el desplazamiento mediante CSS.
¿Cómo detener el desbordamiento de contenido y habilitar el desplazamiento?
El propósito de evitar que el contenido se desborde es que el contenido se ajuste a su contenedor y no afecte negativamente el rendimiento del sitio web. Puede comprender fácilmente el contexto y puede mejorar la accesibilidad al final de los usuarios. Para una explicación detallada, analicemos a través de un ejemplo:
Paso 1: habilite el desplazamiento con desbordamiento de contenido
Inicialmente, comience creando una tabla dentro del archivo HTML en la que se aplicará el efecto de desplazamiento. Supongamos que la tabla ya está creada y consta de seis filas y siete columnas, y se proporcionan algunos datos ficticios a la tabla:
< mesa >
< tr >
< el > cabeza 1 < / el >
< el > cabeza 2 < / el >
< el > cabeza 3 < / el >
< el > cabeza 4 < / el >
< el > cabeza 5 < / el >
< el > cabeza 6 < / el >
< el > cabeza 7 < / el >
< / tr >
< tr >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< td > Fila 1 < / td >
< / tr >
< tr >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< td > Fila 2 < / td >
< / tr >
< tr >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< td > Fila 3 < / td >
< / tr >
< tr >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< td > Fila 4 < / td >
< / tr >< tr >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< td > Fila 5 < / td >
< / tr >
< tr >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< td > Fila 6 < / td >
< / tr >
< / mesa >
Después de la ejecución del fragmento de código anterior, la página web aparece así:
El resultado muestra que los datos de la tabla están en un formato menos legible y la tabla adquiere mucho espacio.
Paso 2: Configuración del efecto de desbordamiento y desplazamiento En el fragmento de código anterior: Después de la ejecución del fragmento de código anterior, la página web aparece así: La página web ilustra que la tabla ahora consume menos espacio y evita que el contenido se desborde. Además, se ha habilitado el efecto de desplazamiento. Nota : Configurando ' desbordamiento: automático ' o ' desbordamiento: desplazamiento ”, los usuarios pueden habilitar el desplazamiento para el contenido desbordado. Además, el ' desbordamiento: oculto ” se puede utilizar para evitar el desbordamiento por completo. Las propiedades 'overflow-x' y 'overflow-y' se utilizan para controlar el desbordamiento y permitir el desplazamiento en los ejes horizontal y vertical. Evita que el contenido se desborde y permite el desplazamiento para crear un diseño receptivo interactivo para todos los dispositivos. Este artículo ha demostrado cómo evitar que el contenido se desborde y habilitar el desplazamiento mediante CSS.
Después de eso, envuelva la mesa con un padre '
.Desbordamiento {
ancho : 200px ;
altura : 200px ;
desbordamiento-x : auto ;
desbordamiento-y : auto ;
comportamiento de desplazamiento : liso ;
}
Conclusión