گروه مقاله : CSS
تاريخ انتشار : 1396/03/01 - 12:52
كد :7559

آموزش CSS Overflow

در این آموزش به توضیح CSS Overflow خواهیم پرداخت این ویژگی به شما امکان میدهد که اگر متن از محدودیت المان خود بزرگتر بود به آن اسکرول بدهید.

آموزش Css Overflow

Overflow  : برای این منظور اینجاد شده است که اگر متنی از فضای اختصاص داده شده بزرگتر باشد نوار اسکرول برای آن ظاهر شود.

ویژگیOverflow   چهار مقدار زیر را میپذیرد

Visible : این گزینه بصورت پیشفرض اعمال میشود و متن را با حاشیه فضای محدود شده ماسک نمی کند بلکه آن را خارج از آن فضا به نمایش می گزارد.

Hidden : قسمت های اضافه متن را ماسک می کند.

Scroll : متن های اضافه ماسک شده اند ولی نوار اسکرولی به شما امکان دسترسی به آنها را میدهد.

Auto : اگر متن بیشتر از فضای درنظر گرفته شده باشد اسکرول بار به نمایش در خواهد آمد.

 

نکته : ویژگی overflow تنها با المان های بلوک شده با ارتفاع مشخص کار می کند.

نکته : در مک سیستم عامل OS X Lion نوار های اسکرول بطور پیشفرض محفی هستند و برای نمایش آنها باید از overflow:scroll استفاده کرد.

گزینه Visible :

همانطور که توضیح دادیم این گزینه هنگامی بکار میرود که نخواهیم محدودیت ارتفاع المان متن ما را محدود کند

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

گزینه Hidden:

همانطور که توضیح دادیم این گزینه برای زمانی است که نخواهیم متن در خارج از محدوده های المان دیده شود.

div {
overflow: hidden;
}

گزینه Scroll :

 انتخاب این گزینه باعث خواهد شد که متن ما در خارج از محدوده المان به کمک نوار اسکرول قابل دسترس باشد. نکته اینکه استفاده از این قابلیت در هر حالتی نوار پیمایش را نشان خواهد داد حتی اگر به آن نیازی نباشد.

div {
overflow: scroll;
}


گزینه Auto :

این گزینه مانند اسکرول عمل می کند با این فرق که اگر نیازی به نوار پیمایش نباشد آنرا به نمایش نخواهد گذاشت.

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 */
}


تعداد بازديد : 110
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*