CSSالمحتوى الفائض
- مفهوم المحتوى الفائض
- مشاكل المحتوى الفائض
- إظهار شريط تمرير
- إظهار شريط التمرير في مكان محدد
- تقطيع النص الطويل الفائض
مفهوم المحتوى الفائض
المحتوى الفائض أو الزائد هو المحتوى الذي يتطلب عرضه كاملاً مساحة أكبر من مساحة العنصر الموضوع فيه.
حين يكون المحتوى بحاجة لمساحة أكبر من مساحة العنصر تلاحظ في العادة وجود شريط تمرير ( Scroll Bar ) يسمح لك بالتحرك بداخل العنصر حتى تتمكن من مشاهدة المحتوى الغير ظاهر منه.
مشاكل المحتوى الفائض
بدايةً إذا لم تحدد أنك تريد إظهار شريط تمرير في حال كان المحتوى أكبر من حجم العنصر فإنه سيتم إظهار كامل المحتوى كالتالي.
إذا لم تظهر شريط تمرير أيضاً فقد تواجه مشكلة تداخل المحتوى، بمعنى أن المحتوى الذي يأتي بعد المحتوى الفائض سيظهر فوقه بدلاً من أن يظهر بعده كما يفترض.
فيما يلي لاحظ كيف أن النص الأحمر يظهر بشكل متداخل مع النص الفائض الموضوع قبله.
حل مشكلة المحتوى الفائض
يجب دائماً إخفاء المحتوى الفائض حتى لا يتداخل مع العنصر التالي الموضوع بعده في الصفحة و يجب إظهار شريط تمرير لجعل المستخدم قادر على رؤية كل محتوى العنصر.
إظهار شريط تمرير
بدايةً العنصر يجب أن يكون حجمه محدد و يظهر كبلوك سواء block
أو inline-block
حتى يكون بإمكانك إظهار شريط تمرير فيه.
لتحديد كيف سيتعامل المتصفح مع المحتوى الفائض عن حجم العنصر يمكنك استخدام الخاصية overflow
و تمرير إحدى القيم التالية لها:
القيمة | معناها |
---|---|
visible |
لجعل المحتوى الفائض يظهر دائماً و هذه القيمة الإفتراضية. |
hidden |
لجعل المحتوى الفائض مخفي و هنا لا يتم إظهار أي شريط تمرير أيضاً. |
scroll |
لإظهار أشرطة التمرير طوال الوقت سواء كان العنصر بحاجتها أم لا. |
auto |
لإظهار أشرطة التمرير بشكل تلقائي إذا كان حجم المحتوى أكبر من حجم العنصر. |
في بعض المتصفحات شريط التمرير حتى لو جعلته scroll
فإنه لا يظهر طوال الوقت بل يظهر فقط عند الحاجة، أي عند التحرك في العنصر و ذلك لإعطاء شكل أجمل للصفحة.
في المثال التالي جعلنا المحتوى الفائض ظاهراً.
في المثال التالي قمنا بإخفاء المحتوى الفائض.
في المثال التالي قمنا بإظهار أشرطة التمرير لجعل المستخدم قادر على رؤية كل المحتوى.
في المثال التالي جعلنا أشرطة التمرير تظهر في حال كان هناك داعي فقط.
إظهار شريط التمرير في مكان محدد
يمكنك تحديد مكان ظهور شريط التمرير لجعله يظهر من جهة محددة سواء أفقياً ( Horizontally ) أسفل العنصر أو عمودياً ( Vertically ) من الناحية اليمنى أو اليسرى.
لتحديد كيف سيتعامل المتصفح مع المحتوى الفائض أفقياً نستخدم الخاصية overflow-x
و لتحديد كيف سيتعامل مع المحتوى الفائض عمودياً نستخدم الخاصية overflow-y
.
في المثال التالي قمنا بإخفاء شريط التمرير الأفقي و إظهار شريط التمرير العمودي.
في المثال التالي قمنا بإظهار شريط التمرير الأفقي و إخفاء شريط التمرير العمودي.
ملاحظة: هنا بما أننا عرضنا نص فقط بداخل العنصر، أضفنا له الخاصية 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
و تمرير إحدى القيم التالية لها:
القيمة | معناها |
---|---|
normal |
لجعل النص الفائض يظهر كما هو و هذه القيمة الإفتراضية. |
break-word |
لجعل النص الفائض ينقطع وينزل على سطر جديد إن لم يكن هناك متسع له في السطر. |
initial |
تعيد إظهار النص الفائض كما كان يظهر أساساً. |
inherit |
لجعل النص يرث طريقة ظهور الوسم الموضوع فيه. |
في المثال التالي قمنا بجعل الكلمات الطويلة التي لا تسع على نفس السطر يتم قطعها و إظهارها على سطر جديد.