ویژگی CSS overflow یک ویژگی مختصر است که مشخص می‌کند چگونه باید با محتوایی که از مرزهای مخزن خود فراتر می‌رود، برخورد کند. این ویژگی می‌تواند برای کلیپ کردن محتوا، اضافه کردن نوارهای پیمایش، یا نمایش نقطه‌چین استفاده شود.
ویژگی overflow فقط برای عناصر سطح بلوک با ارتفاع یا عرض مشخص عمل می‌کند. این ویژگی می‌تواند برای کنترل فراگیری محتوا در هر دو جهت افقی و عمودی استفاده شود.
CSS مقادیر ممکن زیر را برای ویژگی overflow برای کنترل محتوایی که از جعبه عنصر فراتر می‌رود فراهم می‌کند:
visible – محتوا کلیپ نشده و از مخزن فراتر می‌رود.
hidden – محتوا کلیپ شده و فراگیری قابل مشاهده نیست. نوارهای پیمایش وجود ندارد و محتوای کلیپ شده قابل مشاهده نیست.
clip – محتوا کلیپ می‌شود هنگامی که خارج از جعبه خود می‌رود. این می‌تواند با overflow-clip-margin برای تنظیم منطقه کلیپ شده استفاده شود.
scroll – یک نوار پیمایش به مخزن اضافه می‌شود تا کاربر بتواند برای دیدن محتوای فراتر رفته، پیمایش کند.
auto – یک نوار پیمایش فقط زمانی به مخزن اضافه می‌شود که محتوا فراتر رود.
With visible and hidden Values
در این مثال، از ویژگی CSS overflow برای تعیین نحوه برخورد با محتوایی که از مرزهای محدوده خود فراتر می‌رود استفاده می‌شود. مقادیر visible و hidden برای این ویژگی مشخص شده‌اند.
<html>
<head>
<style>
.container {
display: flex;
}
.overflow-visible {
height: 130px;
width: 250px;
overflow: visible;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
margin-right: 15px;
}
h4 {
text-align: center;
color: #D90F0F;
}
.overflow-hidden {
height: 130px;
width: 250px;
overflow: hidden;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-visible">
<h4>Tutorialspoint CSS Overflow Visible</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
<div class="overflow-hidden">
<h4>Tutorialspoint CSS Overflow Hidden</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</body>
</html>در این کد، ما دو دیو با کلاس‌های overflow-visible و overflow-hidden داریم. اولی دارای ویژگی overflow: visible است که به محتوا اجازه می‌دهد از مرزهای خود فراتر رود و دیده شود. دیگری دارای ویژگی overflow: hidden است که هر محتوایی که از مرزهای خود فراتر رود را مخفی می‌کند.
clip Value
در این مثال، ما از ویژگی CSS overflow با مقدار clip برای مخفی کردن محتوایی که از مرزهای محدوده خود فراتر می‌رود استفاده می‌کنیم.
<html>
<head>
<style>
div {
height: 130px;
width: 250px;
overflow: clip;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
}
h4 {
text-align: center;
color: #D90F0F;
}
</style>
</head>
<body>
<div>
<h4>Tutorialspoint CSS Overflow Clip</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic type setting, remaining essentially unchanged.</p>
</div>
</body>
</html>در این کد، ما یک دیو دارای ویژگی‌های اندازه، حاشیه، رنگ پس‌زمینه و اعمال دیگر است که ویژگی‌های اصلی ما نیستند، اما به عنوان مثال، در قالب یک مثال استفاده شده‌اند. ویژگی اصلی این دیو overflow با مقدار clip است که هر محتوایی که از مرزهای خود فراتر برود را مخفی می‌کند، بدون ایجاد اسکرولبار یا کوتاه‌کردن آن.
With scroll and auto Values
در این مثال، نشان داده شده است که چگونه می‌توان ویژگی CSS overflow را به مقادیر scroll یا auto تنظیم کرد. مقدار scroll همیشه یک نوار کشویی اضافه می‌کند، در حالی که auto فقط زمانی که نیاز است یک نوار کشویی اضافه می‌کند.
<html>
<head>
<style>
.container {
display: flex;
}
.overflow-scroll {
height: 130px;
width: 250px;
overflow: scroll;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
margin-right: 15px;
}
h4 {
text-align: center;
color: #D90F0F;
}
.overflow-auto {
height: 130px;
width: 250px;
overflow: auto;
border: 2px solid #000000;
background-color: #2fe262;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="overflow-scroll">
<h4>Tutorialspoint CSS Overflow Scroll</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
<div class="overflow-auto">
<h4>Tutorialspoint CSS Overflow Auto</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</body>
</html>در این مثال، ما دو دیو دارای ویژگی‌های overflow با مقادیر مختلف هستیم. دیو اول با overflow: scroll نوار کشویی را همیشه نمایش می‌دهد، حتی اگر محتوا به اندازه کافی کم باشد. دیو دوم با overflow: auto یک نوار کشویی فقط زمانی که محتوای آن فراتر از مرزهای دیو می‌رود نمایش می‌دهد.
Related Properties
در زیر، فهرستی از ویژگی‌های CSS overflow و توضیح کوتاهی درباره هرکدام آمده است:
- overflow-x: این ویژگی نحوه نمایش محتوایی که در جهت افقی بیش از حد می‌شود را تعیین می‌کند.
- overflow-y: این ویژگی نحوه نمایش محتوایی که در جهت عمودی بیش از حد می‌شود را تعیین می‌کند.
- overflow-anchor: این ویژگی تعیین می‌کند که مرورگر باید صفحه را اسکرول کند تا یک المان در دید قرار گیرد یا نه.
- overflow-block: این ویژگی رفتار محتوای یک المان را مشخص می‌کند وقتی که محتوا به اندازه‌ای عریض است که درون محیطش جا نشود.
- overflow-inline: این ویژگی نحوه نمایش محتوایی که در جهت افقی از حدود چپ و راست یک المان فراتر می‌رود را تعیین می‌کند.
- overflow-clip-margin: این ویژگی مشخص می‌کند چقدر محتوای یک المان می‌تواند قبل از کلیپ شدن از جعبه‌اش فراتر برود.
- overflow-wrap: این ویژگی تعیین می‌کند که مرورگر می‌تواند یک خط متن را درون یک رشته غیر قابل شکسته بشکند یا نه.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام