الكورس

Advertisements

خاصية 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>

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.


 

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>

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.


Advertisements


 

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>

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.

لاحظ أن قيمة scroll أضافت شريط تمرير أفقيًا وعموديًا (حتى إذا لم تكن بحاجة إليه).


 

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>

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.


 

الخصائص المكونة لخاصية 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>

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.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements