Questo articolo dimostrerà:
Come utilizzare 'overflow-hidden' in Tailwind?
IL 'overflow-nascosto' class nasconde o ritaglia il contenuto che supera le dimensioni dell'elemento. Per utilizzare 'overflow-hidden' in Tailwind, crea un programma HTML e applica la classe di utilità 'overflow-hidden' con l'elemento specifico.
Sintassi
Esempio
In questo esempio, applicheremo il 'overflow-nascosto' utility al contenitore
< corpo >
< div classe = 'overflow-nascosto bg-viola-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fornisce vari 'traboccare' utilità, come ad es 'overflow-automatico' , 'overflow-scroll' , 'overflow-nascosto' ,
'overflow-visibile' ecc. Queste utilità determinano come un elemento specifico gestisce il file 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 del selezionato elemento.
< / div >
< / corpo >
Qui:
- 'overflow-nascosto' viene utilizzata per nascondere il contenuto che supera la dimensione del contenitore .
- “bg-viola-300” class imposta il colore viola sullo 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
Nell'output precedente, non è possibile visualizzare il contenuto in overflow, il che indica che la proprietà 'overflow-hidden' è stata applicata correttamente.
Come utilizzare 'overflow-visibile' in Tailwind?
IL “overflow-visibile” class consente di visualizzare il contenuto in eccesso. Per utilizzare 'overflow-visible' in Tailwind, crea una struttura HTML e applica la classe di utilità 'overflow-visible' con il particolare elemento.
Sintassi
Esempio
In questo esempio, applicheremo il “overflow-visibile” utility al contenitoreper mostrare il contenuto di overflow: < corpo >
< div classe = 'overflow-visibile bg-viola-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS fornisce vari 'traboccare' utilità, come ad es 'overflow-automatico' , 'overflow-scroll' , 'overflow-nascosto' ,
'overflow-visibile' ecc. Queste utilità determinano come un elemento specifico gestisce il file 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 del selezionato elemento.
< / div >
< / corpo >Qui, nel frammento di codice sopra, il file “overflow-visibile” class viene utilizzata per mostrare il contenuto che supera la dimensione del contenitore.
Produzione
Secondo l'output sopra, l'utilità 'overflow-visible' è stata applicata correttamente.
Conclusione
Per utilizzare 'overflow-hidden' e 'overflow-visible' in Tailwind, aggiungi il file 'overflow-nascosto' E “overflow-visibile” classi di utilità con gli elementi desiderati nel programma HTML. L'utilità 'overflow-hidden' nasconde il contenuto in overflow mentre 'overflow-visible' mostra il contenuto in overflow dell'elemento specificato. Questo articolo ha esemplificato il metodo di utilizzo delle utilità 'overflow-hidden' e 'overflow-visible' in Tailwind.