Denna uppskrivning kommer att illustrera metoden för att tillämpa brytpunkter och mediefrågor på 'overflow'-verktygen i Tailwind CSS.
Hur man använder brytpunkter och mediefrågor med 'overflow' i medvind?
För att tillämpa särskilda brytpunkter och mediefrågor på 'overflow'-verktyg i Tailwind, skapa en HTML-struktur. Använd sedan ' md ' eller ' lg ” brytpunkter med önskad 'spill-
Exempel
I det här exemplet kommer vi att använda 'md' brytpunkt med 'overflow-scroll' nytta i
behållare för att lägga till rullningslisterna till den och visar dem alltid på medelstor skärmstorlek: < kropp >
< div klass = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS tillhandahåller olika 'overflow'-verktyg, som t.ex
'bräddavloppsautomatik', 'bräddavloppsrullning', 'bräddavloppsdold', 'bräddavloppssynlig'
etc. Dessa verktyg bestämmer hur ett specifikt element hanterar innehållet
som överstiger behållarens storlek. Varje verktyg erbjuder unik funktionalitet,
deras slutmål förblir dock detsamma, d.v.s. att kontrollera överflödet
beteendet hos det valda elementet.
< / div >
< / kropp >
Här:
- De 'overflow-auto' klass används för att lägga till rullningslisterna till behållare och visa dem endast när rullning är nödvändig.
- De 'md:overflow-scroll' klass lägger till rullningslisterna och visar dem alltid på 'md' brytpunkt (medelstor skärmstorlek).
Produktion:
Enligt ovanstående utdata har brytpunkter och mediefrågor använts framgångsrikt på 'overflow'-verktygen.
Slutsats
För att tillämpa brytpunkter och mediefrågor på 'overflow'-verktyg i Tailwind, använd ' sm ”, “ md ' eller ' lg ' brytpunkter med önskad ' overflow-