Tailwind میں 'overflow-hidden' اور 'overflow-visible' کا استعمال کیسے کریں؟

کنٹینر کی افادیت:

< جسم >

< div کلاس = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS مختلف فراہم کرتا ہے۔ 'زیادہ بہاؤ' افادیت، جیسے 'اوور فلو آٹو' , 'اوور فلو سکرول' , 'چھپا ہوا رساو' ,
'اوور فلو نظر آنے والا' وغیرہ۔ یہ افادیت اس بات کا تعین کرتی ہے کہ ایک مخصوص عنصر کس طرح ہینڈل کرتا ہے۔ مواد جو کہ حد سے زیادہ ہے۔
کنٹینر سائز . ہر یوٹیلیٹی منفرد فعالیت پیش کرتی ہے، تاہم، ان کا آخری مقصد ایک ہی رہتا ہے، یعنی کنٹرول کرنا
کے اوور فلو رویے منتخب شدہ عنصر
< / div >

< / جسم >

یہاں:

---

---

• 'چھپا ہوا رساو' کلاس کا استعمال اس مواد کو چھپانے کے لیے کیا جاتا ہے جو
  کنٹینر کے سائز سے زیادہ ہے۔
• 'bg-purple-300' کلاس جامنی رنگ کو کنٹینر کے پس منظر پر سیٹ کرتی ہے۔
• 'p-4' کلاس کنٹینر کے چاروں طرف پیڈنگ کے 4 یونٹ سیٹ کرتی ہے۔
• 'mx-16' کلاس کنٹینر کے ایکس محور پر مارجن کی 16 اکائیوں کا اطلاق کرتی ہے۔
• 'mt-5' کلاس کنٹینر کے اوپری حصے پر مارجن کی 5 اکائیوں کا اطلاق کرتی ہے۔
• 'h-32' کلاس کنٹینر کی اونچائی کو 32 یونٹس پر سیٹ کرتی ہے۔
• 'متن کا جواز' کلاس کنٹینر کے اندر موجود مواد کے متن کا جواز پیش کرتا ہے۔

آؤٹ پٹ

مندرجہ بالا آؤٹ پٹ میں، بہتے ہوئے مواد کو نہیں دیکھا جا سکتا جو اس بات کی نشاندہی کرتا ہے کہ 'اوور فلو چھپی ہوئی' خاصیت کو کامیابی کے ساتھ لاگو کیا گیا ہے۔

Tailwind میں 'overflow-visible' کا استعمال کیسے کریں؟

دی 'زیادہ بہاؤ نظر آنے والا' کلاس حد سے زیادہ مواد کو نظر آنے کے قابل بناتا ہے۔ Tailwind میں 'overflow-visible' کو استعمال کرنے کے لیے، ایک HTML ڈھانچہ بنائیں اور خاص عنصر کے ساتھ 'overflow-visible' یوٹیلیٹی کلاس کا اطلاق کریں۔

نحو

<عنصر کلاس = 'اوور فلو نظر آنے والا...' >...< / عنصر>

مثال
اس مثال میں، ہم لاگو کریں گے 'زیادہ بہاؤ نظر آنے والا' اوور فلو مواد کو دکھانے کے لیے