سی‌اس‌اس/overflow

واکنش‌گرایی

overflow

transition

ویژگی overflow در CSS

overflow یکی از ویژگی‌های مهم در CSS است که نحوه رفتار محتوایی که از ابعاد جعبه (box) عنصر بیشتر است را کنترل می‌کند. این ویژگی تعیین می‌کند که وقتی محتوا از اندازهٔ ظرف خود فراتر رود، چگونه نمایش داده شود.

تعریف

ویژگی overflow مشخص می‌کند که محتوای اضافی خارج از اندازه تعیین شده برای عنصر (مثلاً ارتفاع یا عرض) چگونه نمایش داده شود. این ویژگی به خصوص در طراحی صفحات واکنش‌گرا و مدیریت عناصر با اندازه محدود کاربرد فراوانی دارد.

مقادیر ویژگی overflow

visible (مقدار پیش‌فرض): محتوای اضافی بدون برش خوردن نمایش داده می‌شود و ممکن است از محدوده جعبه عنصر بیرون بزند.
hidden: محتوای اضافی برش خورده و نمایش داده نمی‌شود.
scroll: نوار پیمایش (اسکرول) عمودی و/یا افقی همیشه نمایش داده می‌شود، حتی اگر محتوای اضافی وجود نداشته باشد.
auto: نوار پیمایش فقط در صورت نیاز (زمانی که محتوا بیشتر از جعبه است) نمایش داده می‌شود.
clip: مشابه hidden است ولی فقط محتوا را برش می‌دهد بدون اینکه نوار پیمایش ظاهر شود (مقدار جدید و کمتر استفاده شده).

کاربردها

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

نکات مهم

مقدار overflow بر روی عناصر بلوکی اعمال می‌شود و بر عناصر inline تأثیر ندارد.
برای فعال شدن نوار اسکرول، باید عرض یا ارتفاع عنصر به صورت صریح (مثلاً width یا height) تعیین شده باشد.
ترکیب overflow با ویژگی‌هایی مانند white-space یا word-wrap باعث کنترل بهتر محتوا می‌شود.
مقدار overflow: hidden می‌تواند باعث پنهان شدن ناخواسته محتوا شود، پس با دقت استفاده شود.
در مرورگرهای مختلف رفتار overflow ممکن است تفاوت‌های جزئی داشته باشد؛ تست در مرورگرهای اصلی ضروری است.

نمونه کد

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  overflow: auto;
}

متنی طولانی که از اندازه باکس بیشتر است و باید با اسکرول نمایش داده شود. این متن به منظور نمایش کاربرد overflow:auto نوشته شده است.

نکات سئو و بهینه‌سازی

استفاده درست از overflow می‌تواند از بهم ریختگی و اسکرول‌های غیرضروری جلوگیری کند و تجربه کاربری (UX) را بهبود دهد که به طور غیرمستقیم روی سئو تاثیر مثبت دارد.
از overflow: hidden در محتوایی که ممکن است برای موتورهای جستجو مهم باشد (مانند متن‌های اصلی صفحه) با احتیاط استفاده کنید تا محتوای کلیدی مخفی نشود.
اطمینان حاصل کنید که محتوا درون جعبه‌ها به راحتی قابل مشاهده و دسترسی باشد تا موتورهای جستجو بتوانند آن را به درستی ایندکس کنند.

منابع