Tailwind CSSలోని “ఓవర్‌ఫ్లో” యుటిలిటీలపై బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేసే పద్ధతిని ఈ రైట్-అప్ వివరిస్తుంది.
Tailwindలో 'ఓవర్‌ఫ్లో'తో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి?
టైల్‌విండ్‌లోని “ఓవర్‌ఫ్లో” యుటిలిటీలపై నిర్దిష్ట బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, HTML నిర్మాణాన్ని సృష్టించండి. అప్పుడు, 'ని ఉపయోగించండి md 'లేదా' lg ” కావలసిన వాటితో బ్రేక్‌పాయింట్‌లు “ఓవర్‌ఫ్లో-
ఉదాహరణ
ఈ ఉదాహరణలో, మేము ఉపయోగిస్తాము 'md' తో బ్రేక్ పాయింట్ 'ఓవర్‌ఫ్లో-స్క్రోల్' లో యుటిలిటీ
దానికి స్క్రోల్‌బార్‌లను జోడించడానికి కంటైనర్ మరియు వాటిని ఎల్లప్పుడూ మీడియం స్క్రీన్ పరిమాణంలో చూపుతుంది: < శరీరం >
< div తరగతి = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS వంటి వివిధ 'ఓవర్‌ఫ్లో' యుటిలిటీలను అందిస్తుంది
“ఓవర్‌ఫ్లో-ఆటో”, “ఓవర్‌ఫ్లో-స్క్రోల్”, “ఓవర్‌ఫ్లో-హిడెన్”, “ఓవర్‌ఫ్లో-విజిబుల్”
మొదలైనవి. ఈ యుటిలిటీలు నిర్దిష్ట మూలకం కంటెంట్‌ను ఎలా నిర్వహిస్తుందో నిర్ణయిస్తాయి
అది కంటైనర్ పరిమాణాన్ని మించిపోయింది. ప్రతి యుటిలిటీ ప్రత్యేక కార్యాచరణను అందిస్తుంది,
అయినప్పటికీ, వారి అంతిమ లక్ష్యం అలాగే ఉంటుంది, అంటే ఓవర్‌ఫ్లో నియంత్రించడం
ఎంచుకున్న మూలకం యొక్క ప్రవర్తన.
< / div >
< / శరీరం >
ఇక్కడ:
- ది 'ఓవర్‌ఫ్లో-ఆటో' స్క్రోల్‌బార్‌లను జోడించడానికి తరగతి ఉపయోగించబడుతుంది కంటైనర్ మరియు స్క్రోలింగ్ అవసరమైనప్పుడు మాత్రమే వాటిని చూపించు.
- ది 'md: ఓవర్‌ఫ్లో-స్క్రోల్' తరగతి స్క్రోల్‌బార్‌లను జోడిస్తుంది మరియు ఎల్లప్పుడూ వాటిని చూపుతుంది 'md' బ్రేక్ పాయింట్ (మీడియం స్క్రీన్ పరిమాణం).
అవుట్‌పుట్:
పై అవుట్‌పుట్ ప్రకారం, బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలు 'ఓవర్‌ఫ్లో' యుటిలిటీలపై విజయవంతంగా వర్తింపజేయబడ్డాయి.
ముగింపు
టైల్‌విండ్‌లోని “ఓవర్‌ఫ్లో” యుటిలిటీలపై బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి, “ని ఉపయోగించండి sm ',' md 'లేదా' lg 'కావలసిన వాటితో బ్రేక్ పాయింట్లు' ఓవర్‌ఫ్లో-<విలువ> HTML ప్రోగ్రామ్‌లోని యుటిలిటీలు. ఈ బ్రేక్‌పాయింట్‌లు వేర్వేరు స్క్రీన్ పరిమాణాలలో పేర్కొన్న మూలకం యొక్క ఓవర్‌ఫ్లో ప్రవర్తనను నియంత్రిస్తాయి. టైల్‌విండ్‌లోని “ఓవర్‌ఫ్లో” యుటిలిటీలపై నిర్దిష్ట బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను వర్తింపజేయడానికి ఈ రైట్-అప్ ఉదాహరణను వివరించింది.