టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-హిడెన్” మరియు “ఓవర్‌ఫ్లో-విజిబుల్” ఎలా ఉపయోగించాలి?

కంటైనర్‌కు యుటిలిటీ:

< శరీరం >

< div తరగతి = 'ఓవర్‌ఫ్లో-హిడెన్ bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS వివిధ అందిస్తుంది 'ఓవర్ ఫ్లో' వినియోగాలు, వంటివి 'ఓవర్‌ఫ్లో-ఆటో' , 'ఓవర్‌ఫ్లో-స్క్రోల్' , 'ఓవర్‌ఫ్లో-దాచిన' ,
'ఓవర్‌ఫ్లో-కనిపించే' మొదలైనవి. ఈ యుటిలిటీలు నిర్దిష్ట మూలకం ఎలా నిర్వహిస్తుందో నిర్ణయిస్తాయి విషయము అది మించిపోయింది
కంటైనర్ పరిమాణం . ప్రతి యుటిలిటీ ప్రత్యేక కార్యాచరణను అందిస్తుంది, అయినప్పటికీ, వారి అంతిమ లక్ష్యం అలాగే ఉంటుంది, అంటే నియంత్రించడం
యొక్క ఓవర్ఫ్లో ప్రవర్తన ఎంపిక చేయబడింది మూలకం.
< / div >

< / శరీరం >

ఇక్కడ:

---

---

• 'ఓవర్‌ఫ్లో-దాచిన'
  కంటైనర్ పరిమాణాన్ని మించిన కంటెంట్‌ను దాచడానికి class ఉపయోగించబడుతుంది.
• 'bg-purple-300' తరగతి పర్పుల్ రంగును కంటైనర్ నేపథ్యానికి సెట్ చేస్తుంది.
• 'p-4' తరగతి కంటైనర్ మొత్తం వైపు 4 యూనిట్ల పాడింగ్‌ను సెట్ చేస్తుంది.
• 'mx-16' తరగతి కంటైనర్ యొక్క x-యాక్సిస్‌పై 16 యూనిట్ల మార్జిన్‌ని వర్తింపజేస్తుంది.
• 'mt-5' తరగతి కంటైనర్ పైభాగానికి 5 యూనిట్ల మార్జిన్‌ని వర్తింపజేస్తుంది.
• 'h-32' తరగతి కంటైనర్ యొక్క ఎత్తును 32 యూనిట్లకు సెట్ చేస్తుంది.
• 'టెక్స్ట్-జస్టిఫై' తరగతి కంటైనర్‌లోని కంటెంట్ యొక్క వచనాన్ని సమర్థిస్తుంది.

అవుట్‌పుట్

పై అవుట్‌పుట్‌లో, 'ఓవర్‌ఫ్లో-దాచిన' ప్రాపర్టీ విజయవంతంగా వర్తింపజేయబడిందని సూచించే ఓవర్‌ఫ్లోయింగ్ కంటెంట్ కనిపించదు.

టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-విజిబుల్” ఎలా ఉపయోగించాలి?

ది 'ఓవర్‌ఫ్లో-కనిపించే' తరగతి అధిక కంటెంట్ కనిపించేలా చేస్తుంది. టైల్‌విండ్‌లో “ఓవర్‌ఫ్లో-విజిబుల్”ని ఉపయోగించుకోవడానికి, HTML స్ట్రక్చర్‌ను క్రియేట్ చేయండి మరియు నిర్దిష్ట ఎలిమెంట్‌తో “ఓవర్‌ఫ్లో-విజిబుల్” యుటిలిటీ క్లాస్‌ని వర్తింపజేయండి.

వాక్యనిర్మాణం

<మూలకం తరగతి = 'ఓవర్‌ఫ్లో-కనిపించే ...' >...< / మూలకం>

ఉదాహరణ
ఈ ఉదాహరణలో, మేము దరఖాస్తు చేస్తాము 'ఓవర్‌ఫ్లో-కనిపించే' ఓవర్‌ఫ్లో కంటెంట్‌ని చూపించడానికి