Esta redação irá ilustrar:
Como usar “overflow-auto” no Tailwind?
O ' estouro automático ” adiciona automaticamente barras de rolagem quando o conteúdo transborda. Não mostra a barra de rolagem se o conteúdo não transbordar. Para usar o “overflow-auto” no Tailwind, faça um programa HTML e adicione o “ estouro automático ” para o elemento desejado no programa HTML.
Sintaxe
< elemento aula = 'overflow-auto ...' > ... elemento >
Exemplo
Neste exemplo, vamos aplicar o “overflow-auto” utilidade para o
recipiente: < corpo >
< div aula = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fornece vários utilitários 'overflow', como 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' etc. Esses utilitários determinam como um elemento específico lida com o conteúdo que excede o contêiner tamanho. Cada utilitário oferece uma funcionalidade única, no entanto, seu objetivo final permanece o mesmo, ou seja, controlar o comportamento de estouro do elemento selecionado.
< / div >
< / corpo >
- “overflow-auto” classe é usada para adicionar as barras de rolagem ao container e mostrá-los somente quando a rolagem for necessária.
- “bg-roxo-300” class define a cor roxa para a cor de fundo do contêiner.
- “p-4” classe define 4 unidades de preenchimento em todos os lados do contêiner.
- “mx-16” A classe aplica as 16 unidades de margem no eixo x do contêiner.
- “mt-5” class aplica as 5 unidades de margem ao topo do container.
- 'h-32' classe define a altura do contêiner para 32 unidades.
- “justificar texto” A classe justifica o texto do conteúdo dentro do contêiner.
Saída
A saída acima mostra uma barra de rolagem vertical quando o texto transborda. Isso indica que o “overflow-auto” utilitário foi aplicado ao elemento com sucesso.
Como usar o “overflow-scroll” no Tailwind?
Este utilitário adiciona as barras de rolagem ao contêiner e sempre as mostra, mesmo que a rolagem não seja necessária. Ele também permite a rolagem em todas as direções. Para usar o “overflow-scroll” no Tailwind, faça um programa HTML e adicione o “overflow-scroll” classe de utilitário para o elemento específico no programa HTML.
Sintaxe
< elemento aula = 'overflow-scroll ...' > ... elemento > Exemplo
Neste exemplo, vamos aplicar o “overflow-scroll” utilidade para o
< div aula = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fornece vários utilitários 'overflow', como 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' etc. Esses utilitários determinam como um elemento específico lida com o conteúdo que excede o contêiner tamanho. Cada utilitário oferece uma funcionalidade única, no entanto, seu objetivo final permanece o mesmo, ou seja, controlar o comportamento de estouro do elemento selecionado.
< / div >
< / corpo >
Aqui o “overflow-scroll” classe é usada para adicionar as barras de rolagem ao
container e sempre os mostra.Saída
Na saída acima, as barras de rolagem vertical e horizontal podem ser vistas. Isso indica que o “overflow-scroll” utilitário foi aplicado ao elemento com sucesso.
Conclusão
Para usar o “overflow-auto” e “overflow-scroll” no Tailwind, é necessário adicionar o “overflow-auto” e “overflow-scroll” classes utilitárias aos elementos desejados no programa HTML. Ambas as classes de utilitário adicionam barras de rolagem aos elementos especificados. No entanto, a classe “overflow-auto” mostra as barras de rolagem apenas quando a rolagem é necessária, enquanto a classe “overflow-scroll” sempre as mostra, mesmo que a rolagem não seja necessária. Este artigo ilustrou os métodos para usar “overflow-auto” e “overflow-scroll” no Tailwind.