صفت overflow

صفت overflow

توسط / CSS / یکشنبه, 12 شهریور 1396 ساعت 11:04

در این بخش به آموزش صفت 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.

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.