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

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

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

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

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

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

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

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

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

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

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

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

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

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

div {
    overflow: visible;
}

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

div {
    overflow: hidden;
}

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

div {
    overflow: scroll;
}

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

div {
    overflow: auto;
}

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

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

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

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

div {
    overflow-x: hidden;
    overflow-y: 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;
}

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

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

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

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

div {
    overflow-wrap: break-word;
}