overflow

ویژگی overflow تعیین می کند که محتوایی که از مرزهای عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند.

فقط عناصری که از نوع بلاک هستند محتوایشان سر ریز می شود.

این ویژگی مقادیر زیر را می پذیرد:

 


overflow: visible; /* مقدار پیشفرض */ 
overflow: hidden; 
overflow: scroll;
overflow: auto;
overflow: inherit;

 

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

اما اگر در جهتی (چه افقی, چه عمودی و چه هردو) اندازه عنصر ثابت باشد, آن زمان اگر محتوای عنصر بیشتر از فضای آن باشد, محتوا دچار سرریز می شود.

تعیین ارتفاع و عرض ثابت می تواند از طریق ویژگی های height و width تعیین شود و همچنین می تواند با استفاده از position و تعیین مختصات برای عنصر انجام شود.

visible: این مقدار برای ویژگی overflow که مقدار پیشفرض است باعث می شود تا محتوای سرریز شده, نمایش داده شود.

hidden: اگر این مقدار تعیین شود محتوای سرریز شده نمایش داده نمی شود.

scroll: این مقدار باعث می شود تا برای عنصر اسکرول رسم شود تا محتوا داخل عنصر اسکرول شود.

auto: زمانی که از مقدار scroll استفاده شود حتما اسکرول روی عنصر رسم می شود چه محتوا سرریز کند چه نکند. اما اگر نیاز دارید که قبل از سرریز اسکرول نباشد و زمانی که سرریز صورت گرفت اسکرول ظاهر شود, جواب نیاز شما مقدار auto می باشد.

در تصویر زیر عنصری نمایش داده شده است که مقادیر ثابت برای عرض و ارتفاع آن تعیین شده است:

 
کاربرد ویژگی overflow
 

در مثال بالا فقط از متن به عنوان محتوا استفاده شده است و بصورت پیشفرض زمانی که عرض ثابت باشد متن به خط بعد می شکند و سرریز افقی صورت نمی گیرد. اما اگر محتوا چیزی مثل تصویر باشد قصه فرق می کند:

 
مقادیر overflow در css
 

تنها جایی که این ویژگی تاثیری ندارد زمانی است که محتوا یا فرزندان عنصر دارای position از نوع fixed باشند. همینطور اگر فرزندان نسبت به عنصری غیر از پدرشان absolute شوند نیز overflow تاثیری روی آنها نخواهد داشت.

اگر می خواهید در +iOS 5 طرح اسکرول خود سیستم عامل را داشته باشید باید بصورت زیر عمل کنید:

 


div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

 

در دموی زیر با تغییر مقادیر و بررسی مثال ها به درک بهتر مطلب کمک کنید:
 

See the Pen overflow by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگر ها

ویژگی overflow در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر و iOS پشتیبانی می شود. در اندروید اطلاعات پیشتیبانی این ویژگی ناشناخته است!

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *