انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 62
دورة لغة CSS

المحتوي الزائد عن العنصر في لغة CSSCSS Overflow

سوف تتعلم في هذا الدرس كيفية معالجة والتحكم في طفح المتحوي خارج العنصر اذا كان حجم المحتوي أكبر من حجم العنصر عن طريق خاصية overflow في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,859
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

CSS Overflow المحتوي الزائد عن العنصر في لغة CSS

عن طريق خاصية overflow في لغة CSS يمكن التحكم طفح المحتوي وهو المحتوي الزائد عن حجم العنصر فاذا كان العنصر أصغر من المحتوي فسوف يطفح المحتوي خارج حدود العنصر ويمكن اخفاء المحتوي الزائد أو عمل scroll داخل العنصر لكي يتم اخفاء جزء وظهور جزء بناء علي scroll لأسفل ولأعلي.


قيم خاصية overflow في لغة CSS:

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

content is overflow

طفح المحتوي خارج حدود العنصر لأن المحتوي زائد عن حجم العنصر عن طريق خاصية overflow في لغة CSS يتم معالجة هذا الأمر.

read content by scroll down

يتم قراءة المحتوي داخل العنصر عن طريق scroll لأسفل داخل العنصر تم ظهور scroll عن طريق خاصية overflow في لغة CSS.

some content is hiddent

بعض المحتوي تم إخفاءه لأنه ليس له مكان داخل حدود العنصر عن طريق خاصية overflow في لغة CSS.

scroll x and scroll y

يمكن عرض scroll رأسي و scroll أفقي عن طريق خاصية overflow في لغة CSS.

CSS overflow values

قيم خاصية overflow في لغة CSS.

HTML 
overflow:visible|hidden|clip|scroll|auto|initial|inherit;

CSS overflow syntax

طريقة كتابة خاصية overflow في لغة CSS.

HTML 
overflow:value;

CSS overflow visible خاصية overflow مع القيمة visible في لغة CSS

خاصية overflow مع القيمة visable في لغة CSS هي الوضع الأفتراضي للعنصر تعني أن المحتوي إذا زاد عن حجم box أو حجم العنصر فأن المحتوي يطفح للخارج لأن ليس له مساحة بداخل العنصر.

جرّب بنفسك

CSS overflow visible

خاصية overflow مع القيمة visible في لغة CSS.

HTML 
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 60px;
  border: 1px solid black;
}
جرّب بنفسك

CSS overflow hidden خاصية overflow مع القيمة hidden في لغة CSS

تُستخدم خاصية overflow نع القيمة hidden لأخفاء الزائد عن حجم الصندوق أو العنصر يظهر جزء من المحتوي وهو بقدر طول وعرض العنصر فقط.

جرّب بنفسك

CSS overflow hidden

خاصية overflow مع القيمة hidden في لغة CSS.

HTML 
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 60px;
  overflow: hidden;
  border: 1px solid black;
}
جرّب بنفسك

CSS overflow scroll خاصية overflow مع القيمة scroll في لغة CSS

تُستخدم خاصية overflow مع القيمة scroll في لغة CSS ليظهر scroll داخل الصندوق لكي يتم قراءة المحتوي الزائد عن حجم الصندوق أو العنصر في حال أن المحتوي أكبر من حجم الصندوق.

جرّب بنفسك

CSS overflow scroll

خاصية overflow مع القيمة scroll في لغة CSS.

HTML 
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 60px;
  overflow: scroll;
  border: 1px solid black;
}
جرّب بنفسك

CSS overflow auto خاصية overflow مع القيمة auto في لغة CSS

تُستخدم خاصية overflow مع القيمة auto  ليظهر  scroll فقط عند الحاجه وفي حالات معينة مثل إذا تم عرض الصندوق بحجم مختلف وكان المحتوي أكبر من حجم العنصر علي شاشات مختلفه فسوف يظهر scroll والعكس.

CSS overflow auto

جرّب بنفسك

CSS overflow auto

HTML 
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 60px;
  overflow: auto;
  border: 1px solid black;
}
جرّب بنفسك

CSS overflow-x and overflow-y خاصية overflow-x و overflow-y في لغة CSS

تُستخدم خاصية overflow-x وخاصية overflow-y في لغة CSS لعمل scroll أفقي أو scroll رأسي أو الأثنين معاً.

overflow-x يتحكم scroll في الجانب الأيمن والجانب الأيسر.

overflow-x يتحكم scroll في الأعلي والأسفل.

جرّب بنفسك

CSS overflow-x and overflow-y

HTML 
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 120px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات13

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 13 مفهومةأول بطاقة، أول خطوة
01 Overflow زائد / تجاوز
للمراجعة
02 Syntax بناء الجملة
للمراجعة
03 Element عنصر
للمراجعة
04 Property خاصية
للمراجعة
05 Scroll تنقل من الأعلي الي الأسفل
للمراجعة
06 Values قيم
للمراجعة
07 Block كتلة
للمراجعة
08 Visible مرئي
للمراجعة
09 Hidden مخفي
للمراجعة
10 Auto آلي
للمراجعة
11 Box صندوق
للمراجعة
12 Inline مضمن
للمراجعة
13 Value قيمة
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

3أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي3 أسئلة تنتظرك
01

لماذا تستخدم خاصية overflow ؟

02

ماهي القيمة الافتراضية لخاصية overflow ؟

____
03

كيف يمكننا اخفاء المحتوي الذائد عن ال box الخاص بعنصر معين ؟