overflow

شرح خاصية 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 عادة للتحكم في طريقة عرض العنصر الزائد، وتستخدم على نطاق واسع في العديد من التطبيقات مثل القوائم العرضية والمحتويات الطويلة والنوافذ القابلة للتمرير.

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