overflow في CSS: التحكم في المحتوى الزائد

أعطيت صندوقاً ارتفاعاً ثابتاً، ثم كتبت فيه نصاً طويلاً. أين يذهب النص الزائد؟ يخرج من الصندوق ويغطي ما تحته، وتبدو الصفحة مكسورة. هذه المشكلة تسمى الفيضان (Overflow)، وكل مطور ويب يقابلها مراراً. في هذا الدرس ستتعلم كيف تتحكم فيها بالخاصية overflow.

متى يحدث الفيضان؟

الأصل أن الصندوق يتمدد ليسع محتواه، ولهذا لا ترى المشكلة عادةً. لكن الفيضان يحدث عندما تقيّد الصندوق:

• أعطيته height ثابتاً والنص أطول منه.
• أعطيته width ثابتاً وبداخله كلمة طويلة جداً أو صورة عريضة.

تخيّل كوب ماء: إذا سكبت فيه أكثر من حجمه فاض الماء على الطاولة. الخاصية overflow تحدد ماذا تفعل بالماء الزائد.

القيم الأربع

القيمة	ماذا يحدث للمحتوى الزائد؟
visible	يخرج من الصندوق ويظهر فوق ما حوله. وهي القيمة الافتراضية
hidden	يُقص ويختفي، ولا يمكن الوصول إليه
scroll	يُقص، ويظهر شريط تمرير دائماً، حتى لو لم تكن له حاجة
auto	يُقص، ويظهر شريط التمرير عند الحاجة فقط

.terms {
  height: 150px;
  overflow: auto;
}

هذا صندوق شروط الاستخدام المعروف: ارتفاعه ثابت، ونصه الطويل يُقرأ بالتمرير داخله.

والقاعدة العملية: عندما تريد تمريراً فاختر auto، لأن scroll تعرض أشرطة فارغة لا حاجة لها.

اتجاه واحد: overflow-x و overflow-y

تستطيع أن تتحكم في كل اتجاه وحده:

• overflow-x: الاتجاه الأفقي.
• overflow-y: الاتجاه الرأسي.

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

.table-wrapper {
  overflow-x: auto;
}

<div class="table-wrapper">
  <table>...</table>
</div>

الجدول يُمرَّر داخل حاويته، وباقي الصفحة يبقى ثابتاً في مكانه.

قص النص بثلاث نقاط

عنوان طويل في بطاقة صغيرة؟ الحل المعروف أن تقصه وتضع في آخره ثلاث نقاط. وهذا يحتاج ثلاث خصائص معاً:

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

1. white-space: nowrap: تمنع النص من النزول إلى سطر جديد.
2. overflow: hidden: تقص ما خرج عن الصندوق.
3. text-overflow: ellipsis: تضع النقاط الثلاث عند موضع القص.

إذا نقصت واحدة منها لم تظهر النقاط.

الكلمات الطويلة جداً

رابط طويل أو كلمة بلا مسافات قد تخرج من صندوقها وتسبب تمريراً أفقياً للصفحة كلها. الحل:

.comment {
  overflow-wrap: anywhere;
}

هذه الخاصية تسمح للمتصفح بكسر الكلمة الطويلة في أي موضع إذا لم يجد حلاً آخر.

قص الزوايا الدائرية

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

.card {
  border-radius: 16px;
  overflow: hidden;
}

الآن كل ما بداخل البطاقة يُقص على شكل زواياها.

التمرير الأفقي غير المقصود

أكثر مشكلة مزعجة على الموبايل: الصفحة تتحرك يميناً ويساراً بلا سبب ظاهر. السبب دائماً عنصر واحد أعرض من الشاشة. وأشهر المتهمين:

• صورة بلا max-width: 100%.
• عنصر عرضه ثابت بالبكسل، مثل width: 500px.
• كلمة طويلة أو رابط طويل.
• عنصر عرضه 100vw.

لا تخفِ المشكلة

كتابة overflow-x: hidden على body تخفي التمرير، لكنها لا تحل السبب: المحتوى الزائد ما زال مقصوصاً ولا يراه الزائر. ابحث عن العنصر العريض وأصلحه هو.

جرّب بنفسك

غيّر قيمة overflow في الكلاس box إلى visible ثم hidden ثم scroll، وراقب الفرق. ثم احذف أحد الأسطر الثلاثة من الكلاس title وشاهد ما يحدث للنقاط:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; } .title { width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .box { height: 110px; padding: 0 12px; background: #ececff; border: 2px solid #5b5bf0; overflow: auto; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• ارتفاع ثابت لصندوق فيه نص: النص يتغير طوله مع حجم الشاشة واللغة. استخدم min-height ليتمدد الصندوق عند الحاجة.
• overflow: hidden تخفي محتوى مهماً: الزائر لا يملك أي طريقة للوصول إلى ما قُص. إذا كان المحتوى مهماً فاستخدم auto.
• نقاط القص لا تظهر: نسيت white-space: nowrap أو overflow: hidden، أو أن العنصر inline بلا عرض محدد.
• علاج التمرير الأفقي بالإخفاء: السبب الحقيقي يبقى، ويظهر في مكان آخر.

اختبر نفسك

سؤال

ما الفرق بين overflow: scroll و overflow: auto؟

scroll تعرض الشريط دائماً، و auto تعرضه عند الحاجة فقطauto تخفي المحتوى الزائد بلا تمريرلا فرق بينهما

سؤال

أي خاصية من الثلاث تمنع النص من النزول إلى سطر جديد عند القص بثلاث نقاط؟

white-space: nowraptext-overflow: ellipsisoverflow: hidden

الخلاصة

• الفيضان يحدث عندما يكون المحتوى أكبر من صندوق مقيّد العرض أو الارتفاع.
• overflow لها أربع قيم: visible و hidden و scroll و auto.
• overflow-x: auto على حاوية الجدول يحل مشكلة الجداول العريضة.
• قص النص بنقاط يحتاج nowrap و hidden و ellipsis معاً.
• التمرير الأفقي غير المقصود سببه عنصر أعرض من الشاشة: أصلحه ولا تخفه.