css

صفت overflow – آموزش CSS

در این بخش به آموزش صفت overflow می پردازیم. باما همراه باشید.


در CSS ممکن است عکسی یا متنی داشته باشید که بیشتر و یا بزرگ تر از بخش مورد نظرتون هست و اگه اون عکس بخواهد با اندازه ی خودش در صفحه قرار گیرد، باعث به هم ریختگی هایی در صفحه ی سایتمون خواهد شد. برای حل این مشکل می توانیم از صفتی به نام overflow استفاده کنیم که قابلیت های کم ولی پر کار بردی برای ما دارد. برای اشنایی بیشتر با این صفت ویژگی های آن را برسی می کنیم.

در جلوی صفت inherit یا همان قسمت ویژگی های این صفت شما چندین ویژگی می توانید بنویسید. این صفات عبارتند از:

الف) visible : این ویژگی همان ویژگی پیش فرض صفت overflow می باشد. این ویژگی همه ی متن یا عکس را نشان می دهد. از این صفت به ندرت استفاده می شود.

ب ) hidden :این ویژگی مشخص می کند که اگر عکس یا متنی از کادر عنصر بیرون زده شد مخفی کن و نمایش ندهد.

پ ) scroll : مشخص می کند که متن یا عکس را در همان بخش مورد نظر نمایش بدهد اما با استفاده از غلطک (scroll) به بقیه ی متن یا عکس دسترسی داشته باشد.

ت ) auto : این هم همان صفت scroll است ولی با این تفاوت که اگر نیاز باشد، از غلطک استفاده می کند. به عنوان مثال ویژگی scroll برای طول و عرض، غلطک قرار می دهد هر چند استفاده ای نشود و یا نیاز نباشد، ولی ویژگی auto مشخص می کند اگر نیاز دارد بگذارد ولی در غیر این صورت استفاده نکند.

ث ) initial : این ویژگی یعنی مقدار پیش فرض را برای عنصر در نظر بگیرد.

ج )inherit : این صفت یعنی مقداری که والد (پدرش) دارد را به عنصر فرزند نیز بدهد.

به مثال های زیر توجه کنید :

در HTML :

<p class="meclass">این متن جهت تست می باشد . این متن جهت تست میباشد.  این متن جهت تست میباشد.  این متن جهت تست میباشد.</p>


در CSS :

.myclass {
 width: 100px;
 height: 100px;
 overflow: hidden;
}


نتیجه :

این متن جهت تست می باشد . این متن جهت تست میباشد.این متن جهت تست می باشد . این متن جهت تست میباشد.

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

test visible. test visible. test visible. test visible. test visible. test visible. test visible. test visible.

test scroll. test scroll. test scroll. test scroll. test scroll. test scroll. test scroll. test scroll. test scroll.

test auto. test auto. test auto. test auto. test auto. test auto. test auto. test auto. test auto. test auto.

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close