Este escrito ilustrará:
¿Cómo usar 'overflow-auto' en Tailwind?
El ' desbordamiento automático La clase ” agrega automáticamente barras de desplazamiento cuando el contenido se desborda. No muestra la barra de desplazamiento si el contenido no se desborda. Para usar el 'overflow-auto' en Tailwind, haga un programa HTML y agregue el ' desbordamiento automático ” clase de utilidad al elemento deseado en el programa HTML.
Sintaxis
< elemento clase = 'desbordamiento automático...' > ... elemento >
Ejemplo
En este ejemplo, aplicaremos el 'desbordamiento automático' utilidad a la
envase: < cuerpo >
< división clase = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS proporciona varias utilidades de 'desbordamiento', como 'desbordamiento automático', 'desbordamiento de desplazamiento', 'desbordamiento oculto', 'desbordamiento visible', etc. Estas utilidades determinan cómo un elemento específico maneja el contenido que excede el contenedor. tamaño. Cada utilidad ofrece una funcionalidad única, sin embargo, su objetivo final sigue siendo el mismo, es decir, controlar el comportamiento de desbordamiento del elemento seleccionado.
< / división >
< / cuerpo >
- 'desbordamiento automático' La clase se utiliza para agregar las barras de desplazamiento a la contenedor y mostrarlos solo cuando sea necesario desplazarse.
- “bg-púrpura-300” class establece el color púrpura en el color de fondo del contenedor.
- 'p-4' la clase establece 4 unidades de relleno en todos los lados del contenedor.
- “mx-16” class aplica las 16 unidades de margen en el eje x del contenedor.
- “mt-5” class aplica las 5 unidades de margen a la parte superior del contenedor.
- 'h-32' class establece la altura del contenedor en 32 unidades.
- 'texto-justificar' class justifica el texto del contenido dentro del contenedor.
Producción
El resultado anterior muestra una barra de desplazamiento vertical cuando el texto se desborda. Esto indica que el 'desbordamiento automático' La utilidad se ha aplicado correctamente al elemento.
¿Cómo usar 'overflow-scroll' en Tailwind?
Esta utilidad agrega las barras de desplazamiento al contenedor y siempre las muestra, incluso si el desplazamiento no es necesario. También permite el desplazamiento en todas las direcciones. Para usar el 'overflow-scroll' en Tailwind, haga un programa HTML y agregue el 'desbordamiento-desplazamiento' clase de utilidad al elemento particular en el programa HTML.
Sintaxis
< elemento clase = 'desbordamiento-desplazamiento ...' > ... elemento > Ejemplo
En este ejemplo, aplicaremos el 'desbordamiento-desplazamiento' utilidad a la
< división clase = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS proporciona varias utilidades de 'desbordamiento', como 'desbordamiento automático', 'desbordamiento de desplazamiento', 'desbordamiento oculto', 'desbordamiento visible', etc. Estas utilidades determinan cómo un elemento específico maneja el contenido que excede el contenedor. tamaño. Cada utilidad ofrece una funcionalidad única, sin embargo, su objetivo final sigue siendo el mismo, es decir, controlar el comportamiento de desbordamiento del elemento seleccionado.
< / división >
< / cuerpo >
Aquí el 'desbordamiento-desplazamiento' La clase se utiliza para agregar las barras de desplazamiento a la
contenedor y siempre los muestra.Producción
En la salida anterior, se pueden ver las barras de desplazamiento verticales y horizontales. Esto indica que el 'desbordamiento-desplazamiento' La utilidad se ha aplicado correctamente al elemento.
Conclusión
Para usar el 'overflow-auto' y el 'overflow-scroll' en Tailwind, se requiere agregar el 'desbordamiento automático' y 'desbordamiento-desplazamiento' clases de utilidad a los elementos deseados en el programa HTML. Ambas clases de utilidad agregan barras de desplazamiento a los elementos especificados. Sin embargo, la clase 'overflow-auto' muestra las barras de desplazamiento solo cuando es necesario desplazarse, mientras que la clase 'overflow-scroll' siempre las muestra, incluso si el desplazamiento no es necesario. Este artículo ha ilustrado los métodos para usar 'overflow-auto' y 'overflow-scroll' en Tailwind.