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

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

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

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

selector {
    overflow: value;
}

value: سلوك overflow المطلوب، والذي يمكن أن يكون واحدًا مما يلي:

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

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

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

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

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

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

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

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

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

التحدي

سهل

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

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

REQUIRED OUTPUT FORMAT: [Your translated content here]

جرّب بنفسك

<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>