مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. اگر در وب سایت خود از محتوای زیاد در عناصر HTML استفاده می کنید، گاهی ممکن است محتوا از مرز عنصر HTML والد خود خارج شده و طراحی را به هم بزند. برای حل این مشکل ویژگی Overflow در CSS معرفی شده است. این ویژگی وضعیت هایی را شامل می شود که هر یک از این وضعیت ها به صورتی محتوای عناصر HTML را کنترل کرده و از خارج شدن آن از حد و مرز مشخص شده جلوگیری می کند. در ادامه ی این مبحث برای آشنایی با طرز کار با Overflow در CSS با ما همراه باشید.
کار با Overflow در CSS
در ادامه ی آموزش به ساختار کلی Overflow در CSS و طرز کار با Overflow در CSS پرداخته ایم.
همچنین هر یک از وضعیت های Overflow در CSS و عملکرد آن ها را شرح داده ایم.
آشنایی با Overflow در CSS
ویژگی Overflow در زمان بزرگترشدن محتوا از عنصر HTML خود، با افزودن اسکرول یا برش زدن محتوا، جلو خارج شدن آن را می گیرد.
Overflow در CSS شامل وضعیت ها و مقادیر زیر است:
visible : این وضعیت پیش فرض عناصر است، و جلوی سریز شدن را نمی گیرد.hidden : این وضعیت بخش سریز شده ی محتوا را برش زده و نمایش نمی دهد.scroll : این وضعیت با افزودن نوار اسکرول عمودی و افقی جلوی سریز شدن محتوا را می گیرد.auto : این وضعیت در صورت لزوم نوار اسکرول افقی یا عمودی را فعال می کند تا سریز رخ ندهد.
نکته : ویژگی Overflow فقط برای عناصر نوع block با ارتفاع مشخص عمل می کند.
نکته ۲ : در سیستم عامل Mac نوار اسکرول مخفی است(حتی اگر “overflow:scroll” اعمال شده باشد) فقط در زمان استفاده نمایش داده می شود.
وضعیت overflow: visible
حالت پیش فرض در تمام عناصر visible است به این معنی که سریز نمایش داده می شود.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
کد CSS وضعیت فوق بصورت زیر است:
مثال : حالت visible
| div { width: 200px; height: 50px; background-color: #eee; overflow: visible; } |
وضعیت overflow: hidden
وضعیت hidden بخشی از محتوا را که سریز شده باشد، نمایش نمی دهد.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
کد CSS وضعیت فوق به صورت زیر است:
وضعیت overflow: scroll
وضعیت scroll با فعال کردن نوارهای اسکرول عمودی و افقی از سریز محتوا جلوگیری کرده و بخش اضافی محتوا را با اسکرول در اختیار کاربران قرار می دهد.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
کد CSS وضعیت فوق به صورت زیر خواهد بود:
وضعیت overflow: auto
وضعیت auto مشابه وضعیت scroll است با این تفاوت که auto فقط اسکرول های ضروری را فعال می کند.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
کد CSS وضعیت فوق به صورت زیر خواهد بود:
overflow-x و overflow-y
خواص overflow-x و overflow-y برای این است که برای سریز های افقی و عمودی وضعیت های متفاوتی تعریف کنیم.
overflow-x : برای تعیین وضعیت سریز از جهت چپ و راست عناصر است.overflow-y : برای تعیین وضعیت سریز از جهت بالا و پایین عناصر است.
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element’s box.
کد CSS وضعیت فوق:
مثال : تنظیم در x و y
| div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ } |
کلام آخر
سریز شدن محتوا در عناصر HTML یکی از مشکلات درد سرساز در هنگامی درج محتوای طولانی در وب سایت است. که با معرفی ویژگی Overflow در CSS این مشکل به راحتی حل شده است، کافیست طبق مباحث فوق با طرز کار با Overflow در CSS آشنایی داشته باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
