التدفق الزائد (Overflow)

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 41 من 76.

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

إليك الصيغة الأساسية لاستخدام خاصية overflow:

selector {
    overflow: value;
}

value: سلوك التجاوز المطلوب، والذي يمكن أن يكون أحد ما يلي:

visible: هذه هي القيمة الافتراضية. يتم عرض المحتوى الفائض خارج مربع العنصر وقد يتداخل مع العناصر المجاورة.

hidden: يتم قص المحتوى الزائد، وتكون بقية المحتوى غير مرئية.

scroll: يضيف أشرطة تمرير (أفقية وعمودية على حد سواء) للعنصر، مما يسمح للمستخدمين بالتمرير عبر المحتوى الفائض.

auto: يحدد المتصفح ما إذا كان سيتم إضافة أشرطة التمرير بناءً على المحتوى والمساحة المتاحة. عادةً، تُضاف أشرطة التمرير فقط عند الضرورة.

على سبيل المثال:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

في هذا المثال، سيتم إضافة أشرطة تمرير لجميع عناصر <div> التي يبلغ عرضها 200px وارتفاعها 100px لعرض أي محتوى زائد.

يمكنك أيضاً التحكم في سلوك التجاوز (overflow) للاتجاهين الأفقي والرأسي بشكل مستقل باستخدام الخاصيتين overflow-x و overflow-y:

.example {
    overflow-x: hidden; /* إخفاء التجاوز الأفقي */
    overflow-y: scroll; /* إضافة شريط تمرير عمودي */
}

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسم (<div>) يضم فقرة (<p>) بنص طويل. مهمتك هي استخدام خاصية overflow للتحكم في كيفية عرض المحتوى الفائض. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div>. قم بتعيين width إلى 300px، و height إلى 150px، و border إلى 1px solid black.
قم بتعيين خاصية overflow لعنصر <div> إلى scroll لإضافة أشرطة تمرير إلى العنصر.

ورقة مرجعية

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

selector {
    overflow: value;
}

قيم Overflow:

visible: الافتراضي. يفيض المحتوى خارج صندوق العنصر
hidden: يتم قص المحتوى الفائض ويصبح غير مرئي
scroll: يضيف أشرطة تمرير (أفقية وعمودية)
auto: يضيف المتصفح أشرطة تمرير فقط عند الضرورة

مثال:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

التحكم في التجاوز الأفقي والعمودي بشكل مستقل:

.example {
    overflow-x: hidden; /* إخفاء التجاوز الأفقي */
    overflow-y: scroll; /* إضافة شريط تمرير عمودي */
}

جرّب بنفسك

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>