CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2644

المواضيع

24
الشروحات chevron_left CSS Overflow chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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.

overflow:visible|hidden|clip|scroll|auto|initial|inherit;
CSS overflow syntax

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

overflow:value;

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

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

CSS overflow visible

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

#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.

#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.

#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
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 60px;
  overflow: auto;
  border: 1px solid black;
}
ملاحظة
قم بتصغير الصفحة وتكبيرها وشاهد سوف يظهر scroll عند تصغير الصفحة ويختفي scroll عند تكبير الصفحة وهذا المقصود بإظهار scroll تلقائي auto.

</> 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
#overflow
{
  background: skyblue;
  color: blue;
  padding: 15px;
  width: 96%;
  height: 120px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات