CSS Tutorial

التدفق - Overflow

هو الخاصية التي تتحكم في كيفية التعامل مع المحتوى الذي يتجاوز حدود العنصر.

قيم الخاصية:

  • التدفق: مرئي (Overflow: visible): يسمح للمحتوى بأن يتجاوز حدود العنصر ويظهر خارجها.
  • التدفق: مخفي (Overflow: hidden): يقص المحتوى الذي يتجاوز حدود العنصر ويخفيه.
  • التدفق: تمرير (Overflow: scroll): يضيف شريط تمرير إلى العنصر يتيح للمستخدمين التمرير وعرض المحتوى المتجاوز.
  • التدفق: تلقائي (Overflow: auto): يضيف شريط تمرير إلى العنصر فقط عند الحاجة، أي إذا كان المحتوى يتجاوز حدود العنصر.

مثال CSS:

لإنشاء مربع يحتوي على نص يتجاوز حدوده، مع إضافة شريط تمرير:

div {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

نصائح لإدارة المحتوى المتجاوز:

  • استخدم التدفق: مخفي إذا كنت تريد إخفاء المحتوى الزائد.
  • استخدم التدفق: تمرير إذا كنت تريد السماح للمستخدمين بالوصول إلى المحتوى الزائد من خلال التمرير.
  • يمكن استخدام التدفق: تلقائي في الحالات التي لا يكون فيها من الواضح ما إذا كان المحتوى سيتجاوز الحدود أم لا.