Este artículo demostrará:
¿Cómo usar 'desbordamiento oculto' en Tailwind?
El 'desbordamiento-oculto' class oculta o recorta el contenido que excede el tamaño de ese elemento. Para utilizar el 'desbordamiento oculto' en Tailwind, cree un programa HTML y aplique la clase de utilidad 'desbordamiento oculto' con el elemento específico.
Sintaxis
Ejemplo
En este ejemplo, aplicaremos el 'desbordamiento-oculto' utilidad al contenedor
< cuerpo >
< división clase = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS proporciona varios 'Desbordamiento' utilidades, tales como 'desbordamiento automático' , 'desbordamiento-desplazamiento' , 'desbordamiento-oculto' ,
'desbordamiento-visible' etc. Estas utilidades determinan cómo un elemento específico maneja el contenido que excede la
envase 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 seleccionado elemento.
< / división >
< / cuerpo >
Aquí:
- 'desbordamiento-oculto' La clase se usa para ocultar el contenido que excede el tamaño del contenedor .
- “bg-púrpura-300” class establece el color púrpura en el fondo del contenedor.
- 'p-4' la clase coloca 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
En el resultado anterior, no se puede ver el contenido desbordado, lo que indica que la propiedad 'desbordamiento oculto' se ha aplicado correctamente.
¿Cómo usar 'overflow-visible' en Tailwind?
El “desbordamiento-visible” La clase permite que el contenido excedente sea visible. Para utilizar el 'desbordamiento visible' en Tailwind, cree una estructura HTML y aplique la clase de utilidad 'desbordamiento visible' con el elemento en particular.
Sintaxis
Ejemplo
En este ejemplo, aplicaremos el “desbordamiento-visible” utilidad al contenedorpara mostrar el contenido de desbordamiento: < cuerpo >
< división clase = 'desbordamiento-visible bg-morado-300 p-4 mx-16 mt-5 h-32 texto-justificar' >
Tailwind CSS proporciona varios 'Desbordamiento' utilidades, tales como 'desbordamiento automático' , 'desbordamiento-desplazamiento' , 'desbordamiento-oculto' ,
'desbordamiento-visible' etc. Estas utilidades determinan cómo un elemento específico maneja el contenido que excede la
envase 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 seleccionado elemento.
< / división >
< / cuerpo >Aquí, en el fragmento de código anterior, el “desbordamiento-visible” La clase se usa para mostrar el contenido que excede el tamaño del contenedor.
Producción
De acuerdo con el resultado anterior, la utilidad 'desbordamiento visible' se ha aplicado con éxito.
Conclusión
Para usar el 'desbordamiento oculto' y el 'desbordamiento visible' en Tailwind, agregue el 'desbordamiento-oculto' y “desbordamiento-visible” clases de utilidad con los elementos deseados en el programa HTML. La utilidad 'overflow-hidden' oculta el contenido desbordado mientras que 'overflow-visible' muestra el contenido desbordado del elemento especificado. Este artículo ha ejemplificado el método de uso de las utilidades 'desbordamiento oculto' y 'desbordamiento visible' en Tailwind.