Theme
Primary Color
أكاديمية الزيرو

الدرس 34

المحتوى الزائد والتمرير باستخدام overflow

معنى المصطلحات

المعنىStand ForName
طريقة التعامل مع المحتوى اللي بيزيد عن مساحة العنصرoverflow

لما تحدد ارتفاع صغير والنص يبقى طويل المحتوى ممكن يخرج بره الخلفية 

ال overflow بتحدد هنعرض الزيادة إزاي

محتوى أكبر من المساحة

<div class="box">
  First Line<br>
  Second Line<br>
  Third Line<br>
  Fourth Line<br>
  Fifth Line<br>
  Sixth Line<br>
  Seventh Line<br>
  Eighth Line
</div>
.box {
  width: 220px;
  height: 60px;
  background-color: #eee;
  border: 2px solid blue;
  overflow: visible;
}

القيمة visible هي الافتراضية 

هتشوف الكلام الزيادة ظاهر بره حدود العنصر من غير ما ارتفاعه المحدد يزيد

إخفاء الزيادة

overflow: hidden;

استبدل سطر overflow بالسطر ده المحتوى الزيادة بيتقص ومفيش شريط تمرير ظاهر للمستخدم

شريط تمرير عند الحاجة

overflow: auto;

هتقدر تمرر داخل العنصر علشان تشوف باقي الكلام 

لو قللت المحتوى وبقى مناسب للمساحة مش هتحتاج شريط تمرير

طلب التمرير باستمرار

overflow: scroll;

دي بتطلب آلية التمرير حتى لو المحتوى مش زايد 

لكن ظهور الشريط نفسه طول الوقت بيتأثر بإعدادات النظام والمتصفح

كل اتجاه لوحده

overflow-x: hidden;
overflow-y: auto;

استبدل سطر overflow بالسطرين دول علشان تخفي الزيادة الأفقية 

وتسمح بالتمرير الرأسي وقت الحاجة

جرب بنفسك

جرب visible ثم hidden ثم auto بنفس المثال 

وبعدها قلل عدد السطور وقارن auto و scroll

آخر تعديل للدرس: