تخطيط CSS - تجاوز
تتحكم خاصية CSS overflowفي ما يحدث للمحتوى الأكبر من أن يتناسب مع منطقة.
تجاوز CSS
تحدد الخاصية ما overflowإذا كان سيتم قص المحتوى أو إضافة أشرطة التمرير عندما يكون محتوى العنصر كبيرًا جدًا بحيث لا يتناسب مع المنطقة المحددة.
overflowالخاصية لديها القيم التالية :
visible- تقصير. لا يتم قص الفائض. يتم عرض المحتوى خارج مربع العنصرhidden- يتم قص الفائض ، ويصبح باقي المحتوى غير مرئيscroll- يتم قص الفائض ، ويتم إضافة شريط تمرير لرؤية بقية المحتوىauto- مشابه لـscroll، لكنه يضيف أشرطة التمرير عند الضرورة فقط
ملاحظة: الخاصية تعمل overflowفقط مع عناصر الكتلة ذات الارتفاع المحدد.
ملاحظة: في OS X Lion (في Mac) ، يتم إخفاء أشرطة التمرير افتراضيًا ولا تظهر إلا عند استخدامها (على الرغم من تعيين "overflow: scroll").
تجاوز: مرئي
بشكل افتراضي ، يكون الفائض visible، مما يعني أنه لم يتم قصه ويتم عرضه خارج مربع العنصر:
مثال
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
إخفاء الفائض
باستخدام hiddenالقيمة ، يتم قص الفائض ، ويتم إخفاء باقي المحتوى:
مثال
div {
overflow: hidden;
}
تجاوز: التمرير
عند تعيين القيمة إلى scroll، يتم قص الفائض وإضافة شريط تمرير للتمرير داخل المربع. لاحظ أن هذا سيضيف شريط تمرير أفقيًا وعموديًا (حتى لو لم تكن في حاجة إليه):
مثال
div {
overflow: scroll;
}
تجاوز: تلقائي
القيمة autoمشابهة لـ scroll، لكنها تضيف أشرطة التمرير عند الضرورة فقط:
مثال
div {
overflow: auto;
}
تجاوز x و overflow-y
overflow-xتحدد الخصائص والخصائص ما overflow-yإذا كان سيتم تغيير التدفق الزائد للمحتوى أفقيًا أو رأسيًا (أو كليهما):
overflow-xيحدد ما يجب فعله بالحواف اليسرى / اليمنى للمحتوى.
overflow-yيحدد ما يجب فعله بالحواف العلوية / السفلية للمحتوى.
مثال
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
جميع خصائص CSS Overflow
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |