آشنایی با صفت overflow در CSS

با استفاده از  صفت overflow میتوان محتوای اضافه را چید و یا نوار پیمایشی به یک عنصر اضافه کرد تا بتوان محتوای اضافه را با پیمایش مشاهده نمود :

صفت overflow دارای چهار مقدار زیراست : 

• visible - مقدار پیشفرض. محتوای اضافی چیده نمیشود و  محتوای اضافی از فضایی که عنصر در اختیار دارد تجاوز میکند و در بیرون از باکس مربوط به آن عنصر نمایش می یابد.
• hidden - محتوای اضافی چیده میشود و این ححتوای اضافی برای کاربر قابل نمایش نخواهد بود.
• scroll - محتوای اضافی چیده میشود، اما نوار پیمایش به عنصر اضافه میشود تا بتوان محتوای اضافی را با پیمایش مشاهده نمود
• auto - محتوای اضافی چیده میشود و نوار پیمایش در صورت نیاز به عنصر اضافه میشود.

overflow: visible 

به صورت پیشفرض صفت overflow دارای مقدار visible است و این به این معناست که محتوای اضافی چیده نمیشود و خارج از باکس عنصر مورد نظر نمایش داده میشود :

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

overflow: hidden

زمانی که صفت overflow را با مقدار hidden مقدار دهی میکنیم، محتوای اضافی چیده میشود و آن قابل نمایش برای کاربر نیست :

div {
    overflow: hidden;
}

div {
    overflow: scroll;
}

div {
    overflow: auto;
}

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