طرح‌بندی CSS - پرتاب
- صفحه قبلی z-index CSS
- صفحه بعدی شناور کردن CSS
ویژگی overflow CSS روشی را برای کنترل نحوه برخورد با محتوایی که بزرگ‌تر از منطقه تعیین شده است، ارائه می‌دهد.
CSS Overflow
overflow این ویژگی مشخص می‌کند که آیا محتوا در صورت اینکه بزرگ‌تر از منطقه تعیین شده است بریده می‌شود یا یک نوار کشویی اضافه می‌شود.
overflow این ویژگی می‌تواند مقادیر زیر را تنظیم کند:
visible- پیش‌فرض. محتوا بریده نمی‌شود و در خارج از کادر عنصر رندر می‌شودhidden- محتوا بریده می‌شود و محتوا باقی‌مانده قابل مشاهده نخواهد بودscroll- محتوا بریده می‌شود و یک نوار کشویی اضافه می‌شود تا بتوانید محتوا باقی‌مانده را ببینیدauto- باscrollمثل، اما تنها در صورت نیاز یک نوار کشویی اضافه می‌کند
توضیح:overflow این ویژگی تنها برای عناصر بلوکی با ارتفاع مشخص کاربرد دارد.
توضیح:در OS X Lion (در Mac) به صورت پیش‌فرض نوار کشویی پنهان است و تنها در صورت استفاده نمایش داده می‌شود (حتی اگر "overflow:scroll" تنظیم شده باشد).
overflow: visible
به صورت پیش‌فرض، محتوا قابل مشاهده است (visible)، این بدان معناست که بریده نمی‌شود و در خارج از کادر عنصر رندر می‌شود:
مثال
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
اگر از hidden مقدار بگذارید، محتوا بریده خواهد شد و محتوا باقی‌مانده پنهان خواهد شد:
مثال
div {
overflow: hidden;
}
overflow: scroll
اگر مقدار را به scroll، محتوا بریده خواهد شد و یک نوار کشویی اضافه می‌شود تا بتوانید در داخل کادر بگردید. توجه داشته باشید که این کار یک نوار کشویی در هر دو جهت افقی و عمودی اضافه خواهد کرد (حتی اگر نیازی به آن ندارید):
مثال
div {
overflow: scroll;
}
overflow: auto
auto مقدار آن مشابه scroll، اما تنها در صورت نیاز یک نوار کشویی اضافه می‌کند:
مثال
div {
overflow: auto;
}
overflow-x و overflow-y
overflow-x و overflow-y این ویژگی مشخص می‌کند که آیا تغییرات محتوا به صورت افقی یا عمودی (یا هر دو) صورت می‌گیرد:
overflow-xتعیین می‌کند که چگونه باید با لبه‌های چپ/راست محتوا برخورد شود.overflow-yتعیین می‌کند که چگونه باید با لبه‌های بالا/پایین محتوا برخورد شود.
مثال
div {
overflow-x: hidden; /* مخفی کردن نوار اسکرول افقی */
overflow-y: scroll; /* اضافه کردن نوار اسکرول عمودی */
}
تمام ویژگی‌های overflow CSS
| ویژگی | توضیح |
|---|---|
| overflow | تعیین نحوه مدیریت وقتی محتوا از محدوده محتوا جا می‌افتد. |
| overflow-x | تعیین نحوه مدیریت لبه‌های چپ/راست محتوای محدوده محتوا در حالی که محتوا از محدوده محتوا جا می‌افتد. |
| overflow-y | تعیین نحوه مدیریت لبه‌های بالا/پایین محتوای محدوده محتوا در حالی که محتوا از محدوده محتوا جا می‌افتد. |
- صفحه قبلی z-index CSS
- صفحه بعدی شناور کردن CSS
