❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالمحتوى الفائض

  • مفهوم المحتوى الفائض
  • مشاكل المحتوى الفائض
  • إظهار شريط تمرير
  • إظهار شريط التمرير في مكان محدد
  • تقطيع النص الطويل الفائض

مفهوم المحتوى الفائض

المحتوى الفائض أو الزائد هو المحتوى الذي يتطلب عرضه كاملاً مساحة أكبر من مساحة العنصر الموضوع فيه.

حين يكون المحتوى بحاجة لمساحة أكبر من مساحة العنصر تلاحظ في العادة وجود شريط تمرير ( Scroll Bar ) يسمح لك بالتحرك بداخل العنصر حتى تتمكن من مشاهدة المحتوى الغير ظاهر منه.

We made this long text on purpose to let you notice how the vertical scrollbar allow you to see the reset of content. With CSS you can specify if you want to see horizontal scroll bar or vertical scroll bar only. Also you can hide scroll bars and make overload content hidden.

مشاكل المحتوى الفائض

بدايةً إذا لم تحدد أنك تريد إظهار شريط تمرير في حال كان المحتوى أكبر من حجم العنصر فإنه سيتم إظهار كامل المحتوى كالتالي.

The overloaded content is visible by default and scroll bars are hidden.

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

فيما يلي لاحظ كيف أن النص الأحمر يظهر بشكل متداخل مع النص الفائض الموضوع قبله.

The overloaded content is visible by default and scroll bars are hidden.
You can't read this content

حل مشكلة المحتوى الفائض

يجب دائماً إخفاء المحتوى الفائض حتى لا يتداخل مع العنصر التالي الموضوع بعده في الصفحة و يجب إظهار شريط تمرير لجعل المستخدم قادر على رؤية كل محتوى العنصر.

إظهار شريط تمرير

بدايةً العنصر يجب أن يكون حجمه محدد و يظهر كبلوك سواء block أو inline-block حتى يكون بإمكانك إظهار شريط تمرير فيه.

لتحديد كيف سيتعامل المتصفح مع المحتوى الفائض عن حجم العنصر يمكنك استخدام الخاصية overflow و تمرير إحدى القيم التالية لها:

القيمة معناها
visible لجعل المحتوى الفائض يظهر دائماً و هذه القيمة الإفتراضية.
hidden لجعل المحتوى الفائض مخفي و هنا لا يتم إظهار أي شريط تمرير أيضاً.
scroll لإظهار أشرطة التمرير طوال الوقت سواء كان العنصر بحاجتها أم لا.
auto لإظهار أشرطة التمرير بشكل تلقائي إذا كان حجم المحتوى أكبر من حجم العنصر.

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


في المثال التالي جعلنا المحتوى الفائض ظاهراً.

مثال

div {
overflow: visible;
}
div { overflow: visible; }
جرب الكود

في المثال التالي قمنا بإخفاء المحتوى الفائض.

مثال

div {
overflow: hidden;
}
div { overflow: hidden; }
جرب الكود

في المثال التالي قمنا بإظهار أشرطة التمرير لجعل المستخدم قادر على رؤية كل المحتوى.

مثال

div {
overflow: scroll;
}
div { overflow: scroll; }
جرب الكود

في المثال التالي جعلنا أشرطة التمرير تظهر في حال كان هناك داعي فقط.

مثال

div {
overflow: auto;
}
div { overflow: auto; }
جرب الكود

إظهار شريط التمرير في مكان محدد

يمكنك تحديد مكان ظهور شريط التمرير لجعله يظهر من جهة محددة سواء أفقياً ( Horizontally ) أسفل العنصر أو عمودياً ( Vertically ) من الناحية اليمنى أو اليسرى.

لتحديد كيف سيتعامل المتصفح مع المحتوى الفائض أفقياً نستخدم الخاصية overflow-x و لتحديد كيف سيتعامل مع المحتوى الفائض عمودياً نستخدم الخاصية overflow-y.


في المثال التالي قمنا بإخفاء شريط التمرير الأفقي و إظهار شريط التمرير العمودي.

مثال

div {
overflow-x: hidden;
overflow-y: scroll;
}
div { overflow-x: hidden; overflow-y: scroll; }
جرب الكود

في المثال التالي قمنا بإظهار شريط التمرير الأفقي و إخفاء شريط التمرير العمودي.

ملاحظة: هنا بما أننا عرضنا نص فقط بداخل العنصر، أضفنا له الخاصية لجعله يظهر على سطر واحد حتى يكون بإمكاننا استخدام شريط أفقي معه.

مثال

div {
overflow-x: scroll;
overflow-y: hidden;
}
div { overflow-x: scroll; overflow-y: hidden; }
جرب الكود

معلومة تقنية

الشريط العمودي دائماً يظهر في الجهة العكسية لاتجاه المحتوى على النحو التالي:

  • في حال كان محتوى العنصر يظهر من اليسار إلى اليمين direction: ltr; فإن شريط التمرير العمودي يظهر جهة اليمين.
  • في حال كان محتوى العنصر يظهر من اليمين إلى اليسار direction: rtl; فإن شريط التمرير العمودي يظهر جهة اليسار.

في المثال التالي المحتوى الداخلي وضعناه في <p> و حددنا أن إتجاه من اليسار إلى اليمين لكي يظهر بشكل صحيح. بعدها قمنا بوضعه بداخل <div> إتجاهه من اليمين إلى اليسار حتى يظهر الشريط العمودي من جهة اليسار.

مثال

div {
overflow-x: hidden;
overflow-y: scroll;
direction: rtl;
}
div p {
direction: ltr;
text-align: left;
}
div { overflow-x: hidden; overflow-y: scroll; direction: rtl; } div p { direction: ltr; text-align: left; }
جرب الكود

تقطيع النص الطويل الفائض

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

By default lonnnnnnnnnnnnnnnnnnnnnnnnng words are not wrapped.

لحل هذه المشكلة يمكنك استخدام الخاصية overflow-wrap و تمرير إحدى القيم التالية لها:

القيمة معناها
normal لجعل النص الفائض يظهر كما هو و هذه القيمة الإفتراضية.
break-word لجعل النص الفائض ينقطع وينزل على سطر جديد إن لم يكن هناك متسع له في السطر.
initial تعيد إظهار النص الفائض كما كان يظهر أساساً.
inherit لجعل النص يرث طريقة ظهور الوسم الموضوع فيه.

في المثال التالي قمنا بجعل الكلمات الطويلة التي لا تسع على نفس السطر يتم قطعها و إظهارها على سطر جديد.

مثال

div {
overflow-wrap: break-word;
}
div { overflow-wrap: break-word; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق