69 lines
3.1 KiB
Markdown
69 lines
3.1 KiB
Markdown
---
|
|
title: Overflow
|
|
localeTitle: فيض
|
|
---
|
|
# فيض
|
|
|
|
تحدد الخاصية `overflow` ما يحدث إذا تجاوز المحتوى مربع عنصر (هذه الخاصية لا تعمل إلا مع عناصر الحظر ذات الارتفاع المحدد).
|
|
|
|
تحدد هذه الخاصية ما إذا كان سيتم قص المحتوى أو إضافة أشرطة التمرير عندما يكون محتوى عنصر أكبر من أن يتناسب مع المساحة المحددة.
|
|
|
|
على سبيل المثال ، يتم تعيين عنصر مستوى الكتلة المحدد ( `<div>` ) إلى عرض 300 بكسل ، ويحتوي على صورة بعرض 400 بكسل. ستتم إزالة الصورة من div وتكون مرئية بشكل افتراضي. ومع ذلك ، إذا تم تعيين قيمة الفائض إلى مخفية ، فستتوقف الصورة عند 300 بكسل.
|
|
|
|
## القيم
|
|
|
|
* `visible` : هذه هي القيمة الافتراضية للموقع. لا يتم قص المحتوى عندما يكون أكبر من المربع.
|
|
* `hidden` : سيتم إخفاء المحتوى المتضائل.
|
|
* `scroll` : مشابه للخفي ، ولكن سيتمكن المستخدمون من التمرير عبر المحتوى المخفي.
|
|
* `auto` : إذا استمر المحتوى خارج المربع الخاص به ، فسيتم إخفاء هذا المحتوى ، بينما يجب أن يكون شريط التمرير مرئيًا للمستخدمين لقراءة بقية المحتوى.
|
|
* `initial` : يستخدم القيمة الافتراضية المرئية.
|
|
* `inherit` : لتعيين تجاوز السعة إلى قيمة العنصر الرئيسي.
|
|
|
|
## أمثلة
|
|
|
|
### مرئي:
|
|
|
|
`.box-element { overflow: visible; }
|
|
`
|
|
|
|
|
|
|
|
### المخفية:
|
|
|
|
`.box-element { overflow: hidden; }
|
|
`
|
|
|
|
|
|
|
|
### انتقل:
|
|
|
|
`.box-element { overflow: scroll; }
|
|
`
|
|
|
|
|
|
|
|
### تلقاءي:
|
|
|
|
`.box-element { overflow: auto; }
|
|
`
|
|
|
|
|
|
|
|
## فيض-س وفائض ص
|
|
|
|
* `overflow-x` : يسمح للمستخدم بالتمرير خلال المحتوى الذي يمتد إلى ما بعد ارتفاع عنصر المربع.
|
|
* `overflow-y` : السماح للمستخدم بالتمرير خلال المحتوى الذي يمتد إلى ما وراء عرض المربع.
|
|
|
|
` .box-element {
|
|
overflow-x: scroll;
|
|
overflow-y: auto;
|
|
}
|
|
`
|
|
|
|
`.box-element` كالتالي: 
|
|
|
|
إذا تجاوز المحتوى المحور الصادي ، فسيتم إخفاء هذا المحتوى ، بينما يجب أن يكون شريط التمرير مرئيًا للمستخدمين لقراءة بقية المحتوى.
|
|
|
|
#### معلومات اكثر:
|
|
|
|
CSS-Tricks: [overflow](https://css-tricks.com/almanac/properties/o/overflow/) |