CSS Academy · درس

Overflow: التمرير والقص والتلقائي

تحكّم فيما يحدث عندما يتجاوز المحتوى حاويته باستخدام خصائص overflow.

Overflow: التمرير والقص والتلقائي درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما المقصود بالتجاوز؟

يحدث التجاوز عندما يكون محتوى العنصر أكبر من أبعاده المحددة. وتتحكم خاصية overflow في كيفية التعامل مع هذا المحتوى الزائد.

overflow: visible (الافتراضي)

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

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

تقصّ overflow: hidden أي محتوى يمتد خارج حدود العنصر. ولا يمكن الوصول إلى المحتوى المقصوص أو تمريره.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

تعرض overflow: scroll أشرطة التمرير دائمًا، حتى عندما يتسع العنصر للمحتوى. استخدمها عندما تريد واجهة متسقة بغض النظر عن حجم المحتوى.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

لا تعرض overflow: auto أشرطة التمرير إلا عندما يتجاوز المحتوى الحدود فعلًا. ويُفضّل استخدامها عادةً بدلًا من scroll لتجنب مساحات أشرطة التمرير غير الضرورية.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

تشبه overflow: clip القيمة hidden، لكنها أكثر صرامة: فهي لا تنشئ سياق تنسيق للكتلة، ولا يمكن تمرير المحتوى بها باستخدام JavaScript. وهي مثالية للقص الآمن من ناحية الأداء.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x و overflow-y

يمكنكم التحكم في كل محور بشكل مستقل. يتيح نمط شائع التمرير الأفقي للمحتوى العريض مثل الشيفرة البرمجية أو الجداول:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

نمط الحاوية القابلة للتمرير

لإنشاء حاوية قابلة للتمرير، تحتاجون إلى تحديد ارتفاع ثابت واستخدام overflow: auto أو scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

سياق تنسيق الكتل الناتج عن overflow

يؤدي ضبط overflow على أي قيمة غير visible إلى إنشاء سياق تنسيق كتل (BFC). ويحتوي ذلك على العناصر العائمة الداخلية ويمنع خروج انهيار الهوامش من الحاوية.

تسلسل التمرير

عندما تصل الحاوية القابلة للتمرير إلى نهاية التمرير، يمكن أن تنتقل أحداث التمرير إلى العنصر الأب. استخدموا overscroll-behavior: contain لمنع ذلك.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow مقابل overflow

تتعلق text-overflow: ellipsis بـ النص داخل العنصر، وتتطلب overflow: hidden مع white-space: nowrap لكي تعمل. أما overflow فتتحكم في سلوك تجاوز العنصر نفسه.

تحقق سريع

ما قيمة overflow التي تعرض أشرطة التمرير فقط عندما يتجاوز المحتوى حجم الحاوية فعليًا؟

خلاصة

تقص overflow: hidden المحتوى. تضيف overflow: auto أشرطة التمرير عند الحاجة فقط (وهو الخيار المفضل). تعرض overflow: scroll أشرطة التمرير دائمًا. تقص overflow: clip المحتوى من دون إنشاء سياق تنسيق جديد. استخدموا overflow-x/y للتحكم في كل محور على حدة.

الأسئلة الشائعة

هل درس «Overflow: التمرير والقص والتلقائي» مجاني؟

نعم — نص درس «Overflow: التمرير والقص والتلقائي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Overflow: التمرير والقص والتلقائي»؟

تحكّم فيما يحدث عندما يتجاوز المحتوى حاويته باستخدام خصائص overflow. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «Overflow: التمرير والقص والتلقائي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy