وفقًا لمفهوم نموذج مربع CSS، فإن كل عنصر في الصفحة عبارة عن مربع مستطيل. يمكن التحكم في حجم هذه المربعات وموضعها وسلوكها باستخدام CSS. بالسلوك، أعني كيفية التعامل عندما تتغير المحتويات داخل الصندوق وخارجه. على سبيل المثال، إذا لم تقم بتعيين ارتفاع المربع، فسيزداد ارتفاع المربع حسب الحاجة لاستيعاب محتواه. ولكن ماذا يحدث عندما تحدد ارتفاعًا أو عرضًا لمربع ويتجاوزه المحتوى الموجود بداخله؟ هذا هو الوقت المناسب لإضافة خاصية CSS overflow، والتي تسمح لك بتحديد كيفية التعامل مع هذا الموقف.
تحتوي الخاصية overflow على أربع قيم: مرئية (افتراضية)، مخفية، تمريرة، وتلقائية . هناك أيضًا خاصيتان شقيقتان لـ overflow و overflow-y و overflow-x، والتي نادرًا ما يتم استخدامها.
دعونا نلقي نظرة على كل من هذه القيم ونناقش الاستخدام والتقنيات الشائعة.
مرئي
إذا لم تقم بتعيين سمة التجاوز، فستكون قيمة سمة التجاوز الافتراضية مرئية. لذا بشكل عام، لا يوجد سبب لتعيين خاصية التجاوز على وجه التحديد لتكون مرئية إلا إذا كنت تريد تجاوز القيمة التي تم تعيينها عليها في مكان آخر.
الشيء المهم الذي يجب تذكره هنا هو أنه على الرغم من أن المحتوى خارج الصندوق مرئي، إلا أن المحتوى لا يؤثر على سير عمل الصفحة. على سبيل المثال:
بشكل عام، على الأقل لا تحتاج إلى تعيين ارتفاع ثابت للمربعات التي يكون محتواها نصًا، لذلك لن تواجه هذا الموقف.
مختفي
القيمة المعاكسة للقيمة الافتراضية المرئية مخفية. سوف يخفي كل شيء خارج الصندوق.
يعد هذا مفيدًا حقًا للتعامل مع المحتوى الديناميكي الذي قد يسبب بعض مشكلات التخطيط بسبب تجاوز سعة المحتوى. ومع ذلك، يرجى تذكر أن المحتوى المخفي باستخدام هذه الطريقة لن يكون مرئيًا على الإطلاق (إلا إذا نظرت إلى الكود المصدري). على سبيل المثال، قام بعض المستخدمين بتعيين الخط الافتراضي للمتصفح الخاص بهم ليكون أكبر مما كنت تتوقع، وسوف تقوم بدفع بعض النص خارج المربع وإخفائه تمامًا...