إضافة css overflow

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

 

تعريف

tag
{
    width:%value%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

tag:hover{
    overflow:visible;
}

تحتوي إضافة css overflow على خاصية hovering لـ css ، والتي بدورها تنشط تجاوز النص عندما يكون مؤشر الماوس عليه ، ويعتمد تجاوز css على عاملين رئيسيين:

  • حجم العلامة.
  • ضع القناع
  • يظهر الاختفاء عند Hover.

 

فوائد إضافة css overflow

سيؤدي التعامل مع علامات متعددة في html إلى تقليل المسافات في صفحة HTML الخاصة بنا ، وكان تجاوز CSS هو الحل الأفضل لإخفاء بعض حدود النص من صفحتنا.

سنذكر بعض فوائد استخدام الفائض:

  • سهل الاستخدام.
  • التوافق عن طريق إنشاء علامات HTML سريعة الاستجابة.
  • حسن استخدام موارد الصفحة.
  • تغليف النصوص.

 

مثال

من فضلك ، لفهم تجاوز CSS جيدًا ، انسخ الرموز التالية في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Word Wrap, White Space</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <style>
    div
{
    background-color:#EEE;
    padding:10px;
    border:1px solid #CCC;
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div:hover{
    overflow:visible;
}
    </style>

    <body>
        <div>
            <h3>Without break The word</h3>
            <p>file:///C:/Users/mutaSYS/Desktop/CSS/part8%20Text%20Overflow/Word%20Wrap,%20White%20Space.html</p>
        </div>
    </body>

</html>

 

 

 

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *