خاصية Overflow فى CSS

سيعلمك هذا الفصل خاصية Overflow فى CSS، مع التعرف على القيم المختلفة لهذه الخاصية.

خاصية Overflow فى CSS

تحدد خاصية overflow المختصرة السلوك/السعة أو المساحة المطلوب لتجاوز عنصر ما؛ أي عندما يكون محتوى العنصر كبيرًا جدًا بحيث لا يتناسب مع سياق تنسيق الكتلة الخاص به. هل تريد المحتوى الزائد يتم قصة، أو إضافة أشرطة التمرير، وهكذا.

يمكن أن تحتوي خاصية overflow على القيم التالية:

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

القيم المختلفة لخاصية Overflow

1. Overflow visible

بشكل افتراضي ، يكون المحتوى الزائد visible مرئيًا ، مما يعني أنه لم يتم قصه ويظهر خارج مربع العنصر. كالتالى:

<style>
p {
  overflow: visible;
  width: 300px;
  height: 80px;
  padding: 5px;
  border: 3px solid blue;
}
</style>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta.</p>

2. Overflow hidden

مع إستخدام قيمة hidden، يتم قص الفائض ، ويتم إخفاء باقي المحتوى. كالتالى:

<style>
p {
  overflow: hidden;
  width: 300px;
  height: 80px;
  padding: 5px;
  border: 3px solid blue;
}
</style>

<p>Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta.</p>

3. Overflow scroll

عند تعيين قيمة scroll، يتم قص الفائض وإضافة شريط التمرير للتمرير داخل المربع، كالتالى:

<style>
p {
  overflow: scroll;
  width: 300px;
  height: 140px;
  padding: 5px;
  border: 3px solid blue;
}
</style>

<p>Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta.</p>

4. Overflow auto

تشبه قيمة auto قيمة scroll ، ولكنها تضيف أشرطة التمرير فقط عند الضرورة. كالتالى:

<style>
p {
  overflow: auto;
  width: 300px;
  height: 140px;
  padding: 5px;
  border: 3px solid blue;
}
</style>

<p>Ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta.</p>

الخصائص المكونة لخاصية Overflow

خاصية overflow هي اختصار لخصائص CSS التالية:

• overflow-x: تحدد ما يظهر عندما يتجاوز المحتوى (أفقيًا) الحواف اليسرى واليمنى لعنصر على العناصر الـ block.
• overflow-y: تحدد ما يظهر عندما يتجاوز المحتوى (رأسيًا) الحواف العلوية والسفلية لعنصر على العناصر الـ block.

مثال للتوضيح:

<style>
p {
  overflow-x: hidden;
  overflow-y: auto;
  width: 300px;
  height: 80px;
  padding: 5px;
  border: 3px solid blue;
}
</style>

<p>Faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. adipiscing elit. Cras ultricies ligula sed magna dictum porta.</p>