التعامل مع المحتوى الفائض Overflow
قد يكون هناك موقف يكون فيه محتوى العنصر أكبر من أبعاد الصندوق نفسه. على سبيل المثال ، لا تسمح خصائص العرض والارتفاع المحددة بمساحة كافية لاستيعاب محتوى العنصر.
تتيح لنا الخاصية overflow تحديد ما إذا كنا نريد قص المحتوى أو عرض أشرطة التمرير أو تجاوز عرض المحتوى لعنصر اخر على مستوى الكتلة.
يمكن أن تأخذ هذه الخاصية إحدى القيم التالية: visible (القيمة الإفتراضية) و hidden و scroll و auto . تم اضافة الخصائص overflow-x و overflow-y لـ CSS3 بحيث تسمح هذه الخصائص بالتحكم المستقل في القص الرأسي والأفقي.
مثال
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow </title>
<style>
div {
width: 250px;
height: 150px;
border: 1px solid #cccccc;
}
div.scroll {
overflow: scroll;
}
div.hidden {
overflow: hidden;
}
</style>
</head>
<body>
<h1>قم بتعديل قيم العرض والطول لملاحظة تأثير الخاصية overflow </h1>
<h2>overflow:scroll</h2>
<div class="scroll">
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
</div>
<h2>overflow:hidden</h2>
<div class="hidden">
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
</div>
</body>
</html>
المخرجات
قم بتعديل قيم العرض والطول لملاحظة تأثير الخاصية overflow
overflow:scroll
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
You can view the overflowed content using scrollbar.
overflow:hidden
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
The overflowed content is hidden.
سيكون المخرج كما في الصوره ضهور شريط التمرير في احداها واختفاءه في الاخرى
| القيمة | الوصف |
|---|---|
visible |
القيمة الافتراضية. لن يتم قص المحتوى ؛ سيتم عرضه خارج مربع العنصر ، وبالتالي قد يتداخل مع محتوى آخر. |
hidden |
يتم قطع المحتوى الذي يفيض في مربع العنصر ويصبح باقي المحتوى غير مرئي. |
scroll |
يتم قطع المحتوى الفائض ، تمامًا مثل hidden ، ولكنه يوفر آلية تمرير للوصول إلى المحتوى الفائض. |
auto |
إذا تجاوز المحتوى مربع العنصر ، فسيوفر المتصفح تلقائيًا أشرطة التمرير لرؤية باقي المحتوى ، وإلا فلن يظهر شريط التمرير. |
كورس css
عدد الموضوعات 28 الخاصة ب كورس ' css3 ' العدد الكلي .