টেইলউইন্ডে কীভাবে 'ওভারফ্লো-লুকানো' এবং 'ওভারফ্লো-দৃশ্যমান' ব্যবহার করবেন?

কন্টেইনারে ইউটিলিটি:

< শরীর >

< div ক্লাস = 'ওভারফ্লো-লুকানো bg-বেগুনি-300 p-4 mx-16 mt-5 h-32 টেক্সট-জাস্টিফাই' >
Tailwind CSS বিভিন্ন প্রদান করে 'ওভারফ্লো' ইউটিলিটি, যেমন 'ওভারফ্লো-অটো' , 'ওভারফ্লো-স্ক্রোল' , 'ওভারফ্লো গোপন' ,
'ওভারফ্লো-দৃশ্যমান' ইত্যাদি বিষয়বস্তু যে অতিক্রম করে
ধারক আকার . প্রতিটি ইউটিলিটি অনন্য কার্যকারিতা প্রদান করে, তবে তাদের শেষ লক্ষ্য একই থাকে, যেমন নিয়ন্ত্রণ করা
এর ওভারফ্লো আচরণ নির্বাচিত উপাদান
< / div >

< / শরীর >

এখানে:

---

---

• 'ওভারফ্লো গোপন'
  কন্টেইনারের আকার অতিক্রম করে এমন বিষয়বস্তু লুকানোর জন্য class ব্যবহার করা হয়।
• 'বিজি-বেগুনি-300' ক্লাস পাত্রের পটভূমিতে বেগুনি রঙ সেট করে।
• 'p-4' ক্লাস কন্টেইনারের চারপাশে প্যাডিংয়ের 4 ইউনিট সেট করে।
• 'mx-16' ক্লাস ধারকটির x-অক্ষে মার্জিনের 16 একক প্রয়োগ করে।
• 'mt-5' ক্লাসটি কন্টেইনারের শীর্ষে মার্জিনের 5 ইউনিট প্রয়োগ করে।
• 'h-32' ক্লাস ধারকটির উচ্চতা 32 ইউনিটে সেট করে।
• 'টেক্সট-জাস্টিফাই' ক্লাস কন্টেইনারের ভিতরের বিষয়বস্তুর পাঠ্যকে ন্যায়সঙ্গত করে।

আউটপুট

উপরের আউটপুটে, উপচে পড়া বিষয়বস্তু দেখা যায় না যা নির্দেশ করে যে 'ওভারফ্লো-লুকানো' সম্পত্তি সফলভাবে প্রয়োগ করা হয়েছে।

কিভাবে Tailwind এ 'ওভারফ্লো-দৃশ্যমান' ব্যবহার করবেন?

দ্য 'ওভারফ্লো-দৃশ্যমান' শ্রেণী অতি-অতিরিক্ত বিষয়বস্তু দৃশ্যমান হতে সক্ষম করে। Tailwind-এ 'ওভারফ্লো-দৃশ্যমান' ব্যবহার করতে, একটি HTML কাঠামো তৈরি করুন এবং নির্দিষ্ট উপাদানের সাথে 'ওভারফ্লো-দৃশ্যমান' ইউটিলিটি ক্লাস প্রয়োগ করুন।

বাক্য গঠন

<উপাদান ক্লাস = 'ওভারফ্লো-দৃশ্যমান...' >...< / উপাদান>

উদাহরণ
এই উদাহরণে, আমরা প্রয়োগ করব 'ওভারফ্লো-দৃশ্যমান' ওভারফ্লো বিষয়বস্তু দেখানোর জন্য