overflow

css overflow playground

شرح خاصية css overflow

خاصية overflow هي خاصية في CSS تحدد ما يحدث عندما يتجاوز محتوى العنصر حجمه. تستخدم هذه الخاصية للتحكم في طريقة عرض العنصر الزائد من حيث العرض والارتفاع والتمرير الداخلي.

تتوفر خمسة قيم مختلفة لخاصية overflow وهي:

  • visible: يعرض المحتوى الزائد خارج حدود العنصر، ولا يتم قص أي شيء.
  • hidden: يخفي المحتوى الزائد الذي يتجاوز حجم العنصر.
  • scroll: يخفي المحتوى الزائد الذي يتجاوز حجم العنصر ويضيف شريط التمرير الأفقي والعمودي.
  • auto: يخفي المحتوى الزائد الذي يتجاوز حجم العنصر ويضيف شريط التمرير الأفقي والعمودي إذا كان ذلك ضروريًا.
  • inherit: يرث قيمة overflow من العنصر الأب.

يمكن تحديد خاصية overflow باستخدام CSS، على سبيل المثال:

/* عرض المحتوى الزائد خارج حدود العنصر */
.item {
  overflow: visible;
}

/* إخفاء المحتوى الزائد الذي يتجاوز حجم العنصر */
.item {
  overflow: hidden;
}

/* إضافة شريط تمرير للعنصر الذي يتجاوز حجمه */
.item {
  overflow: scroll;
}

/* إضافة شريط تمرير للعنصر الذي يتجاوز حجمه إذا كان ضروريًا */
.item {
  overflow: auto;
}

تستخدم خاصية overflow عادة للتحكم في طريقة عرض العنصر الزائد، وتستخدم على نطاق واسع في العديد من التطبيقات مثل القوائم العرضية والمحتويات الطويلة والنوافذ القابلة للتمرير.

overflow

value: visible

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quae facilis omnis vero temporibus ad nostrum quos nemo? Voluptatibus rem ullam nemo eius perspiciatis, alias sequi! Accusamus et molestiae voluptatem, dicta soluta sequi, porro dolorum assumenda quasi illum vel autem ab? Quam, vel consectetur sapiente inventore ea sequi tempora possimus similique voluptate accusamus, quae, reiciendis qui veniam voluptas? Officia iste necessitatibus eveniet quibusdam nihil perferendis sit voluptatibus rerum alias velit suscipit beatae illum rem amet, voluptate veritatis sunt, eos quia porro hic totam. Iste facere maxime cumque alias cupiditate, soluta dignissimos quia placeat nam vero eos repellendus harum excepturi hic porro, natus fugit sed

اختبار css overflow

اضغط على start التي في منتصف الاختبار لبدء الاختبار

/10
46 votes, 4.6 avg
1201

اختبار في css overflow

ابدء الاختبار الان و فكر جيداً قبل الاجابة على اي سؤال , بالتوفيق للجميع.

1 / 10

ما هي القيمة التي يتم استخدامها لخاصية overflow لعرض شريط التمرير الرأسي والأفقي حتى لو كان المحتوى لا يتجاوز حجم العنصر؟

2 / 10

ما هي القيمة التي يتم استخدامها لخاصية overflow لعرض شريط التمرير الرأسي والأفقي عندما يكون المحتوى يتجاوز حجم العنصر فقط؟

3 / 10

ما هي الخاصية التي تستخدم لتحديد ما يحدث عندما يتجاوز المحتوى حجم العنصر؟

4 / 10

ما هي الخاصية التي تستخدم لتحديد عرض العنصر؟

5 / 10

ما هي الخاصية التي تستخدم لتحديد الحد الأقصى لارتفاع العنصر؟

6 / 10

ما هي القيمة التي يتم استخدامها لخاصية overflow لعرض المحتوى الزائد وعرض شريط التمرير الرأسي والأفقي في حالة الحاجة؟

7 / 10

ما هي القيمة التي يتم استخدامها لخاصية overflow لعرض المحتوى الزائد وعدم عرض شريط التمرير الرأسي والأفقي؟

8 / 10

ما هي الخاصية التي تستخدم لتحديد ارتفاع العنصر؟

9 / 10

ما هي القيمة التي يتم استخدامها لخاصية overflow لإخفاء المحتوى الزائد؟

10 / 10

ما هي القيمة التي يتم استخدامها لخاصية overflow لإخفاء المحتوى الزائد وعرض شريط التمرير الرأسي والأفقي في حالة الحاجة؟

Your score is

0%

قيم هذا الاختبار من فضلك