Cómo crear un cuadro con texto desplazable con CSS y HTML

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
VALORACIÓN DEL ARTÍCULO:
5/5


Una caja de desplazamiento HTML es una caja que agrega barras de desplazamiento al lado derecho e inferior cuando el contenido de la caja es mayor que las dimensiones de la caja. En otras palabras, si tiene un cuadro que puede caber alrededor de 50 palabras, y tiene 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 extra fuera de la caja.

Hacer scroll HTML es bastante fácil. Basta con definir la anchura y la altura del elemento que se desea desplazar y, a continuación, utilizar la propiedad de desbordamiento de CSS para establecer cómo se desea que se produzca el desplazamiento.

¿Qué hacer con el texto adicional?

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 se flexione para soportarlo.
  • Corte el texto donde se desborda.
  • Añada barras de desplazamiento (normalmente verticales para el texto) de modo que el espacio se desplace para mostrar el texto adicional.

La mejor opción suele ser la última: crear un cuadro de texto con desplazamiento. Entonces se puede leer texto extra, pero su diseño no se ve comprometido.

HTML y CSS para esto sería:

texto aquí....  

El

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 se necesitan las propiedades de estilo de anchura y altura establecidas en el div, para que haya límites que desbordar.

También puede cortar el texto cambiando overflow: auto; to overflow: hidden;. Si omite la propiedad overflow, el texto se desbordará sobre los límites del div.

Puede agregar barras de desplazamiento a algo más que texto

Si tiene una imagen grande que le gustaría mostrar en un espacio más pequeño, puede agregar barras de desplazamiento alrededor de ella de la misma manera que lo haría con el texto.

DIFUNDE LA PALABRA-

En este ejemplo, la imagen de 400x509 está dentro de un párrafo de 300x300.

Las tablas se pueden beneficiar de las barras de desplazamiento

Largas tablas de información pueden llegar a ser muy difíciles de leer muy rápidamente, pero poniéndolas dentro de un div de tamaño limitado y luego añadiendo la propiedad overflow, puedes generar tablas con una gran cantidad de datos que no ocupan un espacio extremo en tu página.

La forma más fácil es igual que con las imágenes y el texto, basta con añadir un div alrededor de la mesa, establecer la anchura y la altura de ese div, y añadir la propiedad overflow:

Thead /"font color="#fefefe "#fefefe#fefefe">#fefefe">#fefefeName}DIFUNDE LA PALABRA- / i>      #fefefe">#fefefe">#fefefeDIFUNDE LA PALABRA-DIFUNDE LA PALABRA- / i>      

Una cosa que sucede cuando se hace esto es que 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 arreglar esto cambiando el ancho de la mesa y otros. Pero mi favorito es simplemente desactivar el desplazamiento horizontal con la propiedad CSS 3

sobre-flujox

Sólo tiene que añadir

overflow-x: oculto;

a la div, y eso eliminará la barra de desplazamiento horizontal. Asegúrese de probar esto, ya que puede haber contenido que desaparezca.

Firefox soporta el uso de las etiquetas TBODY para Overflow

Una característica realmente buena del navegador Firefox es que puedes usar la propiedad overflow en las etiquetas internas de la tabla como tbody y thead o tfoot. Esto significa que puede fijar barras de desplazamiento en el contenido de la tabla, y las celdas de encabezado permanecen ancladas encima de ellas. Esto sólo funciona en Firefox, lo cual es muy malo, pero es una buena característica si sus lectores sólo usan Firefox. Busca este ejemplo en Firefox para ver a qué me refiero.

#fefefe">#fefefe">#fefefeName}DIFUNDE LA PALABRA- / i> #fefefe">#fefefe">#fefefeDIFUNDE LA PALABRA-DIFUNDE LA PALABRA- / i>

Deja un comentario

TAMBIÉN TE INTERESA

desinstalar-aplicaciones-en-Mac

Cómo desinstalar aplicaciones en Mac fácilmente

Desinstalar aplicaciones en Mac es un proceso muy sencillo, aunque es lógico que muchos principiantes en este sistema operativa tengan sus dudas. Y es que cuando has estado toda la vida operando en entornos Windows u otros como Linux, puedes estar algo perdido en acciones tan básicas como instalar o desinstalar aplicaciones en Mac. Índice

discos-duros-externos

Discos duros externos, la guía de compra que necesitas

Todo el mundo necesita discos duros externos. Aunque hoy los ordenadores dispongan de mucha memoria interna y la nube se haya consolidado en el mercado, estos aparatos siguen siendo necesarios para guardar todo tipo de información.   De eso se trata, de guardar la mucha información que hoy disponemos en archivos. A diferencia de la

descargar-videos-de-instagram

Cómo descargar vídeos de Instagram (2 soluciones útiles)

Hola instgramer, si estás buscando una app para poder descargar vídeos de Instagram de forma rápida, este artículo te ayudará.   Te habrás dado cuenta de que Instragram es una de esas redes sociales que se consideran imprescindibles para los usuarios millennials, así como la marcas. Instagram se ha convertido en una máquina de fabricar

Apple-Fitness+

Apple Fitness+: el deporte más tech

El nuevo servicio Apple Fitness+, desvelado en la última presentación de la compañía de Cupertino, promete elevar el deporte y el entrenamiento a otro nivel.   Queda claro que los últimos productos de Apple tienen una clara orientación al cuidado de la salud de las personas. A través del deporte, Apple quiere mover a sus

el-nuevo-Apple-Watch-SE

Nuevo Apple Watch SE: ¿merece la pena el sacrificio de funciones top?

Además de la presentación del nuevo Apple Watch 6, el último evento de Apple también dio a conocer el nuevo Apple Watch SE, el reloj barato de Apple.   No es nueva la referencia SE para los productos de Apple, pues como ya es sabido existen en el mercado varios iPhone SE, el último también

iPad-Air-2020 verde

iPad Air y iPad de 8ª generación: nuevos miembros para la familia iPad

Ojo al nuevo iPad Air… Además de la presentación de los nuevos Apple Watch y otros servicios como Apple One, la compañía de la manzana ha dado a conocer dos nuevos terminales para su familia de iPads: se trata del nuevo iPad Air y el iPad de octava generación.   En este artículo te mostraremos