كيفية استخدام 'overflow-hidden' و 'overflow-visual' في Tailwind؟

Kyfyt Astkhdam Overflow Hidden W Overflow Visual Fy Tailwind



تقدم Tailwind CSS العديد من الأدوات المساعدة 'overflow' التي تمكن المستخدمين من التحكم في سلوك عنصر عندما يتجاوز المحتوى حجم الحاوية الخاصة به. تتضمن هذه الأدوات المساعدة فئات متعددة ، مثل تجاوز - مخفي ، تجاوز مرئي ، تجاوز في التمرير ، و أكثر من ذلك بكثير. من بينها ، الفائض المرئي والفائض المخفي هما الفئات الأكثر استخدامًا التي تسمح أو تقيد رؤية المحتوى الزائد.

ستوضح هذه المقالة:

كيفية استخدام 'overflow-hidden' في Tailwind؟

ال 'إخفاء الفائض' class تخفي أو تقطع المحتوى الذي يتجاوز حجم هذا العنصر. للاستفادة من 'overflow-hidden' في Tailwind ، أنشئ برنامج HTML وطبق فئة الأداة المساعدة 'overflow-hidden' مع العنصر المحدد.







بناء الجملة



<عنصر فصل = 'إخفاء الفائض ...' > ... < / عنصر>

مثال
في هذا المثال ، سنقوم بتطبيق 'إخفاء الفائض' إلى حاوية

لإخفاء محتوى الفائض:



< جسم >

< شعبة فصل = 'overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
يوفر Tailwind CSS العديد من ملفات 'تجاوز' المرافق ، مثل 'تجاوز تلقائي' و 'التمرير الزائد' و 'إخفاء الفائض' و
'تجاوز مرئية' إلخ. تحدد هذه الأدوات المساعدة كيفية تعامل عنصر معين مع محتوى الذي يتجاوز
حاوية مقاس . تقدم كل أداة وظائف فريدة ، ومع ذلك ، يظل هدفها النهائي كما هو ، أي التحكم
سلوك تجاوز المحدد عنصر.
< / شعبة >

< / جسم >

هنا:





  • 'إخفاء الفائض' تُستخدم class لإخفاء المحتوى الذي يتجاوز حجم الحاوية
    .
  • 'bg-purple-300' فئة تعيين اللون الأرجواني لخلفية الحاوية.
  • 'ف -4' فئة تحدد 4 وحدات من الحشو على كل جانب من الحاوية.
  • 'MX-16' تطبق الفئة 16 وحدة من الهامش على المحور السيني للحاوية.
  • 'MT-5' فئة تطبق 5 وحدات من الهامش على الجزء العلوي من الحاوية.
  • 'h-32' فئة تحدد ارتفاع الحاوية إلى 32 وحدة.
  • 'ضبط النص' class يبرر نص المحتوى داخل الحاوية.

انتاج |

في الإخراج أعلاه ، لا يمكن رؤية المحتوى الفائض مما يشير إلى أنه تم تطبيق خاصية 'overflow-hidden' بنجاح.



كيفية استخدام 'overflow-visual' في Tailwind؟

ال 'الفائض المرئي' تتيح فئة المحتوى الزائد أن يكون مرئيًا. للاستفادة من 'overflow-visual' في Tailwind ، أنشئ بنية HTML وطبِّق فئة الأداة المساعدة 'overflow-visual' مع عنصر معين.

بناء الجملة

<عنصر فصل = 'تجاوز مرئية ...' > ... < / عنصر>

مثال
في هذا المثال ، سنقوم بتطبيق 'الفائض المرئي' إلى الحاوية

لإظهار محتوى الفائض:

< جسم >

< شعبة فصل = 'overflow-visual bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
يوفر Tailwind CSS العديد من ملفات 'تجاوز' المرافق ، مثل 'تجاوز تلقائي' و 'التمرير الزائد' و 'إخفاء الفائض' و
'تجاوز مرئية' الخ. تحدد هذه الأدوات المساعدة كيفية تعامل عنصر معين مع محتوى الذي يتجاوز
حاوية مقاس . تقدم كل أداة وظائف فريدة ، ومع ذلك ، يظل هدفها النهائي كما هو ، أي التحكم
سلوك تجاوز المحدد عنصر.
< / شعبة >

< / جسم >

هنا ، في مقتطف الشفرة أعلاه ، ملف 'الفائض المرئي' class تُستخدم لإظهار المحتوى الذي يتجاوز حجم الحاوية.

انتاج |

وفقًا للإخراج أعلاه ، تم تطبيق الأداة المساعدة 'overflow-visual' بنجاح.

خاتمة

لاستخدام 'overflow-hidden' و 'overflow-visual' في Tailwind ، أضف ملف 'إخفاء الفائض' و 'الفائض المرئي' فئات الأدوات المساعدة مع العناصر المطلوبة في برنامج HTML. تخفي الأداة المساعدة 'overflow-hidden' المحتوى الفائض بينما تُظهر 'overflow-visual' المحتوى الفائض للعنصر المحدد. توضح هذه المقالة طريقة استخدام الأدوات المساعدة 'overflow-hidden' و 'overflow-visual' في Tailwind.