Questo articolo illustrerà:
Come utilizzare 'overflow-auto' in Tailwind?
IL ' overflow-auto ” aggiunge automaticamente le barre di scorrimento quando il contenuto va in overflow. Non mostra la barra di scorrimento se il contenuto non trabocca. Per utilizzare 'overflow-auto' in Tailwind, crea un programma HTML e aggiungi ' overflow-auto ” classe di utilità all'elemento desiderato nel programma HTML.
Sintassi
< elemento classe = 'overflow-auto...' > ... elemento >
Esempio
In questo esempio, applicheremo il 'overflow-automatico' utilità al
contenitore: < corpo >
< div classe = 'overflow-auto bg-viola-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fornisce varie utilità di 'overflow', come 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' ecc. Queste utilità determinano come un elemento specifico gestisce il contenuto che supera il contenitore misurare. Ogni utilità offre funzionalità uniche, tuttavia, il loro obiettivo finale rimane lo stesso, ovvero controllare il comportamento di overflow dell'elemento selezionato.
< / div >
< / corpo >
- 'overflow-automatico' viene utilizzata per aggiungere le barre di scorrimento al file contenitore e mostrarli solo quando è necessario scorrere.
- “bg-viola-300” class imposta il colore viola sul colore di sfondo del contenitore.
- 'p-4' class imposta 4 unità di imbottitura su tutti i lati del contenitore.
- “MX-16” class applica le 16 unità di margine sull'asse x del contenitore.
- “mt-5” class applica le 5 unità di margine alla parte superiore del contenitore.
- 'H-32' class imposta l'altezza del contenitore a 32 unità.
- 'giustificazione del testo' class giustifica il testo del contenuto all'interno del contenitore.
Produzione
L'output sopra mostra una barra di scorrimento verticale quando il testo va in overflow. Ciò indica che il 'overflow-automatico' l'utilità è stata applicata correttamente all'elemento.
Come utilizzare 'overflow-scroll' in Tailwind?
Questa utility aggiunge le barre di scorrimento al contenitore e le mostra sempre anche se lo scorrimento non è necessario. Consente inoltre lo scorrimento in tutte le direzioni. Per utilizzare lo 'overflow-scroll' in Tailwind, crea un programma HTML e aggiungi il file 'overflow-scorrimento' classe di utilità al particolare elemento nel programma HTML.
Sintassi
< elemento classe = 'overflow-scorrimento ...' > ... elemento > Esempio
In questo esempio, applicheremo il 'overflow-scorrimento' utilità al
< div classe = 'overflow-scroll bg-viola-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fornisce varie utilità di 'overflow', come 'overflow-auto', 'overflow-scroll', 'overflow-hidden', 'overflow-visible' ecc. Queste utilità determinano come un elemento specifico gestisce il contenuto che supera il contenitore misurare. Ogni utilità offre funzionalità uniche, tuttavia, il loro obiettivo finale rimane lo stesso, ovvero controllare il comportamento di overflow dell'elemento selezionato.
< / div >
< / corpo >
Ecco, il 'overflow-scorrimento' viene utilizzata per aggiungere le barre di scorrimento al file
contenitore e li mostra sempre.Produzione
Nell'output sopra, è possibile vedere sia le barre di scorrimento verticali che orizzontali. Ciò indica che il 'overflow-scorrimento' l'utilità è stata applicata correttamente all'elemento.
Conclusione
Per utilizzare 'overflow-auto' e 'overflow-scroll' in Tailwind, è necessario aggiungere il 'overflow-automatico' E 'overflow-scorrimento' classi di utilità agli elementi desiderati nel programma HTML. Entrambe le classi di utilità aggiungono barre di scorrimento agli elementi specificati. Tuttavia, la classe “overflow-auto” mostra le barre di scorrimento solo quando lo scorrimento è necessario mentre la classe “overflow-scroll” le mostra sempre anche se lo scorrimento non è necessario. Questo articolo ha illustrato i metodi per utilizzare 'overflow-auto' e 'overflow-scroll' in Tailwind.