Questo articolo illustrerà il metodo di applicazione di punti di interruzione e query multimediali sulle utilità di 'overflow' in Tailwind CSS.
Come utilizzare punti di interruzione e query multimediali con 'overflow' in Tailwind?
Per applicare punti di interruzione particolari e query multimediali su utilità di 'overflow' in Tailwind, crea una struttura HTML. Quindi, usa il ' md ' O ' LG ” punti di interruzione con il desiderato 'overflow-
Esempio
In questo esempio, useremo il 'md' punto di rottura con il 'overflow-scorrimento' utilità nel
contenitore per aggiungere le barre di scorrimento ad esso e mostrarle sempre su uno schermo di dimensioni medie: < corpo >
< div classe = 'overflow-auto md:overflow-scroll bg-viola-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS fornisce varie utilità di 'overflow', come ad esempio
'overflow-auto', 'overflow-scroll', 'overflow-nascosto', 'overflow-visibile'
ecc. Queste utilità determinano come un elemento specifico gestisce il contenuto
che supera le dimensioni del contenitore. Ogni utilità offre funzionalità uniche,
tuttavia, il loro obiettivo finale rimane lo stesso, ovvero controllare l'overflow
comportamento dell'elemento selezionato.
< / div >
< / corpo >
Qui:
- IL 'overflow-automatico' viene utilizzata per aggiungere le barre di scorrimento al file contenitore e mostrarli solo quando è necessario scorrere.
- IL 'md:overflow-scroll' class aggiunge le barre di scorrimento e le mostra sempre sul file 'md' punto di interruzione (dimensioni dello schermo medie).
Produzione:
Secondo l'output di cui sopra, i punti di interruzione e le query multimediali sono stati applicati con successo alle utilità di 'overflow'.
Conclusione
Per applicare punti di interruzione e query multimediali su utilità di 'overflow' in Tailwind, utilizzare il ' sm ”, “ md ' O ' LG ” punti di interruzione con il desiderato “ overflow-