டெயில்விண்டில் 'ஓவர்ஃப்ளோ-ஆட்டோ' மற்றும் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' ஆகியவற்றை எவ்வாறு பயன்படுத்துவது?

உதாரணமாக
இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் 'ஓவர்ஃப்ளோ-ஆட்டோ' பயன்பாடு

• 'ஓவர்ஃப்ளோ-ஆட்டோ' சுருள் பட்டைகளை சேர்க்க class பயன்படுகிறது கொள்கலன் மற்றும் ஸ்க்ரோலிங் தேவைப்படும் போது மட்டுமே அவற்றைக் காட்டவும்.
• 'bg-purple-300' கிளாஸ் ஊதா நிறத்தை கொள்கலனின் பின்னணி நிறத்திற்கு அமைக்கிறது.
• 'p-4' கன்டெய்னரின் அனைத்துப் பக்கங்களிலும் 4 யூனிட் திணிப்புகளை வகுப்பு அமைக்கிறது.
• 'mx-16' வர்க்கம் கொள்கலனின் x அச்சில் 16 அலகுகளின் விளிம்பைப் பயன்படுத்துகிறது.
• 'எம்டி-5' வர்க்கம் கொள்கலனின் மேல் விளிம்பின் 5 அலகுகளைப் பயன்படுத்துகிறது.
• 'h-32' வர்க்கம் கொள்கலனின் உயரத்தை 32 அலகுகளாக அமைக்கிறது.
• 'உரை நியாயப்படுத்து' வர்க்கம் கொள்கலனில் உள்ள உள்ளடக்கத்தின் உரையை நியாயப்படுத்துகிறது.

வெளியீடு


---





---

உரை நிரம்பி வழியும் போது மேலே உள்ள வெளியீடு செங்குத்து உருள்ப்பட்டியைக் காட்டுகிறது. என்பதை இது குறிக்கிறது 'ஓவர்ஃப்ளோ-ஆட்டோ' உறுப்புக்கு பயன்பாடு வெற்றிகரமாக பயன்படுத்தப்பட்டது.

டெயில்விண்டில் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' பயன்படுத்துவது எப்படி?

இந்த பயன்பாடானது ஸ்க்ரோல்பார்களை கொள்கலனில் சேர்க்கிறது மற்றும் ஸ்க்ரோலிங் தேவையில்லையென்றாலும் அவற்றை எப்போதும் காண்பிக்கும். இது எல்லா திசைகளிலும் ஸ்க்ரோலிங் செய்ய அனுமதிக்கிறது. டெயில்விண்டில் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' ஐப் பயன்படுத்த, ஒரு HTML நிரலை உருவாக்கி, அதைச் சேர்க்கவும் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' HTML நிரலில் உள்ள குறிப்பிட்ட உறுப்புக்கான பயன்பாட்டு வகுப்பு.





தொடரியல்

< உறுப்பு வர்க்கம் = 'ஓவர்ஃப்ளோ-ஸ்க்ரோல் ...' > ... உறுப்பு >

உதாரணமாக
இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' பயன்பாடு

கொள்கலன்: < உடல் >

< div வர்க்கம் = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >

டெயில்விண்ட் CSS ஆனது 'ஓவர்ஃப்ளோ-ஆட்டோ', 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்', 'ஓவர்ஃப்ளோ-ஹைடன்', 'ஓவர்ஃப்ளோ-விசிபிள்' போன்ற பல்வேறு 'ஓவர்ஃப்ளோ' யூட்டிலிட்டிகளை வழங்குகிறது. இந்த பயன்பாடுகள் கொள்கலனை மீறும் உள்ளடக்கத்தை ஒரு குறிப்பிட்ட உறுப்பு எவ்வாறு கையாளுகிறது என்பதை தீர்மானிக்கிறது. அளவு. ஒவ்வொரு பயன்பாடும் தனித்துவமான செயல்பாட்டை வழங்குகிறது, இருப்பினும், அவற்றின் இறுதி இலக்கு ஒரே மாதிரியாக இருக்கும், அதாவது தேர்ந்தெடுக்கப்பட்ட உறுப்புகளின் வழிதல் நடத்தையை கட்டுப்படுத்துவது.

< / div >

< / உடல் >

இங்கே, தி 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' சுருள் பட்டைகளை சேர்க்க class பயன்படுகிறது

கொள்கலன் மற்றும் எப்போதும் அவற்றைக் காட்டுகிறது.

வெளியீடு



மேலே உள்ள வெளியீட்டில், செங்குத்து மற்றும் கிடைமட்ட சுருள் பட்டைகள் இரண்டையும் காணலாம். என்பதை இது குறிக்கிறது 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' உறுப்புக்கு பயன்பாடு வெற்றிகரமாக பயன்படுத்தப்பட்டது.

முடிவுரை

டெயில்விண்டில் “ஓவர்ஃப்ளோ-ஆட்டோ” மற்றும் “ஓவர்ஃப்ளோ-ஸ்க்ரோல்” ஆகியவற்றைப் பயன்படுத்த, அதைச் சேர்க்க வேண்டும் 'ஓவர்ஃப்ளோ-ஆட்டோ' மற்றும் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' HTML நிரலில் தேவையான கூறுகளுக்கு பயன்பாட்டு வகுப்புகள். இரண்டு பயன்பாட்டு வகுப்புகளும் குறிப்பிட்ட உறுப்புகளுக்கு சுருள் பட்டைகளைச் சேர்க்கின்றன. இருப்பினும், 'ஓவர்ஃப்ளோ-ஆட்டோ' வகுப்பு ஸ்க்ரோலிங் தேவைப்படும்போது மட்டுமே ஸ்க்ரோல்பார்களைக் காட்டுகிறது, அதே சமயம் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' கிளாஸ் ஸ்க்ரோலிங் தேவையில்லையென்றாலும் அவற்றைக் காட்டுகிறது. டெயில்விண்டில் 'ஓவர்ஃப்ளோ-ஆட்டோ' மற்றும் 'ஓவர்ஃப்ளோ-ஸ்க்ரோல்' ஆகியவற்றைப் பயன்படுத்துவதற்கான முறைகளை இந்த எழுதுதல் விளக்கியுள்ளது.