آموزش 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;
}

مشاهده نتیجه