آموزش سی اس اس CSS

پراپرتی overflow مشخص میکند متن های خیلی زیاد چگونه در یک فضای مشخص جا شوند.

CSS Overflow

پراپرتی overflow مشخص میکند متن های خیلی زیاد در یک فضای مشخص بریده شود یا اسکرول بخورد.

پراپرتی overflow مقادیر زیر را دارد:

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

نکاتی که باید در ذهن داشته باشید

I. پراپرتی overflow تنها برای المان های بلاک و ارتفاع مشخص کار میکند.

II. در OS X Lion (on Mac) بصورت پیش فرض اسکرول بارها مخفی هستند و تنها زمانی که استفاده میشوند مشخص میشوند (حتی اگر از overflow:scroll استفاده شود).

overflow: visible

بصورت پیش فرض، مقدار overflow برابر با visible، که به معنای آن است که متن بریده نشود و خارج از باکس المان رندر میشود.

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

overflow: hidden

با مقدار hidden، متن اضافه بریده میشود و باقی متن مخفی میشود.

 
div {
    overflow: hidden;
}
 

overflow: scroll

با مقدار hidden، متن بریده میشود و اسکرول بار داخل باکس اضافه میشود تا بتوان متن را اسکرول کرد. توجه داشته باشید که این اسکرول هم بصورت عمودی و هم افقی به باکس اضافه میشود (حتی اگر به آن نیاز نباشد).

 
div {
    overflow: scroll;
}
 

overflow: auto

مقدار auto شبیه به scroll است، اما تنها زمانی که اسکرول نیاز است آنرا اضافه میکند.

 
div {
    overflow: auto;
}
 

overflow-x و overflow-y

پراپرتی های overflow-x و overflow-y مشخص میکند که محتوای خارج شده از کادر چگونه تغییر کند. آیا تنها بصورت افقی تغییر کند یا عمودی (یا هردو).

overflow-x مشخص میکند که چه اتفاقی برای لبه های سمت چپ و راست محتوا رخ دهد.

overflow-y مشخص میکند که چه اتفاقی برای لبه های سمت بالا و پایین محتوا رخ دهد.

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