صفت overflow در CSS
یادگیری CSS
تعداد بازدید :
5958
تاریخ و ساعت انتشار :
چهار شنبه 1 شهریور 1396 01:53
- زماني كه براي محتوايي محدوده اي تعيين ميكنيم ، اگر محتوا از اين محدوده به علت زياد بودن يا بزرگ بودن ، خارج نشود از صفت overflow براي عدم نمايش باقي مانده محتوا يا اضافه كردن نوار اسكرول به آن استفاده مي كنيم.
صفت overflow يكي از 4 مقدار زير را مي تواند داشته باشد :
visible : محتواي بيشتر از محدوده قطع نمي شود و خارج از محوطه محتوا ادامه مي يابد.
hidden : باقيمانده محتوا نمايش داده نمي شود و محتواي موجود در محدوده تعيين شده نمايش داده مي شود.
scroll : باقي مانده نمايش داده نمي شود اما يك نوار اسكرول براي نمايش باقي مانده ، زير آن ايجاد مي شود.
auto : بسته به شرايط صفحه و مرورگر ، شايد يك نوار اسكرول براي نمايش باقي مانده محتوا ، ايجاد شود.
نكته ! صفت overflow فقط در عناصر سطح بلوك كه ارتفاع مشخصي دارند ، كار مي كند.
نكته ! در OS X Lion سيستم عامل Mac ، نوار اسكرول فقط زماني كه استفاده شوند نمايان مي شوند.
Visible
بطور پيش فرض مقدار visible در صفت overflow مشخص مي كند كه محتوا قطع نشود و باقي آن از محوطه تعيين شده بيرون ميزند :
مثال :
صفت overflow با مقدار visible
مشاهده مثالdiv { width: 200px; height: 50px; background-color: #eee; overflow: visible; }
Hidden
مقدار hidden مشخص مي كند كه محتوا قطع شود و باقي مانده محتوا مخفي بماند.
مثال :
صفت overflow با مقدار hidden
مشاهده مثالdiv { overflow: hidden; }
Scroll
مقدار scroll مشخص مي كند كه محتوا در داخل محدوده تعيين شده نمايش داده شود و يك نوار اسكرول به جعبه متن اضافه مي شود تا باقي مانده آن قابل دسترسي باشد. به ياد داشته باشيد كه در اين حالت نوار اسكرول هم عمودي و هم افقي ايجاد مي شود ، حتي اگر به آن نياز نداشته باشيد.
مثال :
صفت overflow با مقدار scroll
مشاهده مثالdiv { overflow: scroll; }
Auto
مقدار auto همانند scroll است با اين تفاوت كه نوار اسكرول فقط به هنگام نياز اضافه مي شود.
مثال :
صفت overflow با مقدار auto
مشاهده مثالdiv { overflow: auto; }
overflow-x و overflow-y
اين دو صفت زماني مورد استفاده است كه بخواهيم ديد افقي يا عمودي باقي مانده محتوا را تنظيم كنيم.
مثال :
دید افقی و عمودی
مشاهده مثالdiv { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ }
نظر شما
>