Un cuadro de desplazamiento HTML es un cuadro que agrega barras de desplazamiento al lado derecho e inferior cuando el contenido del cuadro es más grande que las dimensiones del cuadro. En otras palabras, si tiene un cuadro que puede caber alrededor de 50 palabras y tiene un texto de 200 palabras, un cuadro de desplazamiento HTML pondrá barras de desplazamiento hacia arriba para permitirle ver las 150 palabras adicionales. En HTML estándar que simplemente empujaría el texto adicional fuera del cuadro.
Hacer HTML scroll es bastante fácil. Solo debe configurar el ancho y el alto del elemento que desea desplazar y luego usar la propiedad de desbordamiento de CSS para configurar cómo desea que se produzca el desplazamiento.
¿Qué hacer con texto extra?
Cuando tiene más texto del que cabe en el espacio de su diseño, tiene algunas opciones:
- Vuelva a escribir el texto para que sea más corto y se ajuste.
- Permita que el texto fluya más allá de los límites y espere que el diseño pueda flexionarse para admitirlo.
- Cortar el texto donde se desborda.
- Agregue barras de desplazamiento (generalmente verticales para el texto) de modo que el espacio se desplace para mostrar el texto adicional.
La mejor opción suele ser la última opción: crear un cuadro de texto de desplazamiento. Entonces aún se puede leer texto adicional, pero su diseño no está comprometido.
HTML y CSS para esto serían:
los
desbordamiento: auto;
le dice al navegador que agregue barras de desplazamiento si son necesarias para evitar que el texto desborde los límites del div. Pero para que esto funcione, también necesita las propiedades de estilo de ancho y alto establecidas en el div, de modo que haya límites para desbordar.
También puede cortar el texto cambiando el desbordamiento: auto; desbordar: oculto ;. Si omite la propiedad de desbordamiento, el texto se extenderá sobre los límites de la div.
Puede agregar barras de desplazamiento a más que solo texto
Si tiene una imagen grande que le gustaría mostrar en un espacio más pequeño, puede agregar barras de desplazamiento a su alrededor de la misma manera que lo haría con el texto.
En este ejemplo, la imagen de 400x509 está dentro de un párrafo de 300x300. Las tablas largas de información pueden ser muy difíciles de leer muy rápidamente, pero al colocarlas dentro de una división de un tamaño limitado y luego agregar la propiedad de desbordamiento, puede generar tablas con una gran cantidad de datos que no ocupan mucho espacio en su página. . La forma más sencilla es como con imágenes y texto, simplemente agregue un div alrededor de la tabla, establezca el ancho y el alto de ese div, y agregue la propiedad de desbordamiento: Una cosa que sucede cuando haces esto es que generalmente aparece una barra de desplazamiento horizontal porque el navegador asume que el cromo de las barras de desplazamiento se superpone a la tabla. Hay muchas maneras de solucionar este problema cambiando el ancho de la tabla y otros. Pero mi favorito es simplemente desactivar el desplazamiento horizontal con la propiedad CSS 3 desbordamiento-x . Solo agrega overflow-x: oculto; a la div, y que eliminará la barra de desplazamiento horizontal. Asegúrese de probar esto, ya que puede haber contenido que desaparece.
Las tablas pueden beneficiarse de las barras de desplazamiento
Nombre Teléfono Jennifer 502-5366
