Overflow (overflow, overflow-x, overflow-y, overflow-wrap)

وقتی محتوا از جعبه بیرون می‌زند: Overflow

در درس‌های قبل چندبار به این نکته اشاره کردیم که وقتی یک عنصر height یا max-height ثابتی داره، محتوای بیشتر از فضای موجود ممکنه از جعبه بیرون بزنه. حالا وقتشه دقیق ببینیم این رفتار دقیقاً چطوره و چطور می‌شه کنترلش کرد.

Overflow چیست؟

Overflow (سرریز) به وضعیتی گفته می‌شه که محتوای داخل یک عنصر، بزرگ‌تر از فضای Content تعریف‌شده براش باشه. Property به اسم overflow مشخص می‌کنه مرورگر در این شرایط چیکار باید بکنه.

.box {
  width: 250px;
  height: 100px;
  border: 2px solid teal;
}

<div class="box">
  این متن طولانی است و ممکن است بیشتر از ارتفاع مشخص‌شده ۱۰۰ پیکسلی جعبه فضا اشغال کند و در نتیجه سرریز ایجاد شود.
</div>

در این مثال، اگه متن بیشتر از فضای ۱۰۰ پیکسلی جا نگیره، به‌طور پیش‌فرض از پایین جعبه بیرون می‌زنه؛ چون هنوز هیچ مقداری برای overflow تعریف نکردیم (که یعنی مقدار پیش‌فرضش، visible، فعاله).

چهار مقدار اصلی Property به اسم overflow

visible: مقدار پیش‌فرض

.box {
  overflow: visible;
}

محتوای اضافی، بدون هیچ محدودیتی، از مرزهای جعبه بیرون می‌زنه و همچنان قابل‌مشاهده باقی می‌مونه. این رفتار می‌تونه باعث هم‌پوشانی با عناصر مجاور بشه.

hidden: پنهان کردن محتوای اضافی

.box {
  overflow: hidden;
}

هر بخشی از محتوا که بیشتر از فضای جعبه باشه، به‌طور کامل بریده و مخفی می‌شه؛ بدون هیچ راهی برای کاربر تا اون بخش رو ببینه (مگر با تغییر اندازه جعبه یا محتوا).

scroll: نمایش اسکرول‌بار همیشگی

.box {
  overflow: scroll;
}

اسکرول‌بار به‌طور همیشگی نمایش داده می‌شه (چه محتوا واقعاً سرریز داشته باشه چه نه)، و کاربر می‌تونه با اسکرول کردن، بخش‌های اضافی محتوا رو ببینه.

auto: نمایش هوشمند اسکرول‌بار

.box {
  overflow: auto;
}

مرورگر خودش تصمیم می‌گیره: اگه محتوا واقعاً سرریز داشته باشه، اسکرول‌بار نمایش داده می‌شه؛ در غیر این صورت، هیچ اسکرول‌باری دیده نمی‌شه. این مقدار معمولاً بهترین انتخاب برای اکثر موارد عمومیه، چون رفتار غیرضروری (اسکرول‌بار بدون نیاز واقعی) رو نشون نمی‌ده.

جدول مقایسه چهار مقدار

مقدار	رفتار محتوای اضافی	اسکرول‌بار
visible	بیرون می‌زند و دیده می‌شود	ندارد
hidden	بریده و کاملاً مخفی می‌شود	ندارد
scroll	پنهان می‌شود، ولی با اسکرول قابل مشاهده است	همیشه نمایش داده می‌شود
auto	پنهان می‌شود، ولی با اسکرول قابل مشاهده است	فقط در صورت نیاز واقعی

overflow-x و overflow-y: کنترل جداگانه هر محور

Property به اسم overflow در واقع یه شورت‌هند برای دو Property جداگانه‌ست: overflow-x (محور افقی) و overflow-y (محور عمودی).

.box {
  overflow-x: hidden;
  overflow-y: auto;
}

در این مثال، هر نوع سرریز افقی به‌طور کامل مخفی می‌شه (بدون امکان اسکرول)، ولی سرریز عمودی، در صورت نیاز، با اسکرول‌بار عمودی قابل‌دسترسی می‌مونه. این ترکیب برای جعبه‌هایی با عرض ثابت ولی ارتفاع پویا خیلی رایجه.

یک مثال کاربردی: لیست با ارتفاع محدود و اسکرول داخلی

.comment-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
}

<div class="comment-list">
  <p>نظر ۱</p>
  <p>نظر ۲</p>
  <p>نظر ۳</p>
  <p>... (تعداد زیادی نظر دیگر)</p>
</div>

در این مثال، اگه تعداد نظرات از فضای ۳۰۰ پیکسلی بیشتر بشه، به‌جای اینکه کل صفحه طولانی‌تر بشه، فقط همین جعبه یک اسکرول داخلی مستقل پیدا می‌کنه؛ الگویی که در بخش‌های چت، نظرات و اعلان‌ها خیلی رایجه.

overflow-wrap: کنترل شکستن کلمات طولانی

یه مشکل رایج دیگه: گاهی یک کلمه یا رشته (مثل یک لینک طولانی یا یک ایمیل) اونقدر بلنده که حتی بدون سرریز عمودی، از عرض جعبه بیرون می‌زنه، چون مرورگر به‌طور پیش‌فرض کلمات رو وسط نمی‌شکنه.

.box {
  width: 200px;
  border: 1px solid gray;
}

<div class="box">
  https://example.com/a-very-long-url-that-does-not-fit-in-this-box
</div>

در این مثال، چون آدرس بالا هیچ فاصله‌ای نداره، مرورگر به‌طور پیش‌فرض اون رو تیکه‌تیکه نمی‌کنه و کل رشته از عرض جعبه بیرون می‌زنه.

.box {
  width: 200px;
  border: 1px solid gray;
  overflow-wrap: break-word;
}

با اضافه شدن overflow-wrap: break-word;، حالا مرورگر اجازه داره، در صورت نیاز، حتی وسط یک کلمه یا رشته طولانی رو بشکنه تا محتوا داخل عرض جعبه باقی بمونه.

نکات مهم

• مقدار پیش‌فرض overflow برابر visible است؛ یعنی محتوای اضافی بدون هیچ محدودیتی از جعبه بیرون می‌زند.
• overflow-x و overflow-y امکان کنترل مستقل هر محور را فراهم می‌کنند.
• overflow-wrap مخصوص شکستن کلمات یا رشته‌های طولانی و بدون فاصله است؛ ربطی به سرریز عمودی کلی محتوا ندارد.

اشتباهات رایج

• استفاده از overflow: scroll در جایی که auto انتخاب مناسب‌تری بود؛ چون scroll همیشه اسکرول‌بار را نمایش می‌دهد، حتی وقتی نیازی نیست.
• فراموش کردن overflow-wrap در جعبه‌هایی که ممکن است محتوای بدون فاصله (مثل لینک یا ایمیل) داشته باشند.
• استفاده بی‌رویه از overflow: hidden، که می‌تواند باعث پنهان شدن ناخواسته بخشی از محتوای مهم شود.

جمع‌بندی

Property به اسم overflow مشخص می‌کند وقتی محتوای یک عنصر بیشتر از فضای Content آن باشد، مرورگر چه رفتاری داشته باشد: نمایش کامل (visible)، پنهان‌سازی (hidden)، اسکرول همیشگی (scroll) یا اسکرول هوشمند (auto). Propertyهای overflow-x و overflow-y این رفتار را به‌صورت مستقل برای هر محور تنظیم می‌کنند، و overflow-wrap مسئول شکستن کلمات یا رشته‌های طولانی و بدون فاصله برای جلوگیری از سرریز افقی است.