در طراحی سایت و صفحات وب خیلی اوقات پیش می آید که سایز محتوا با سایز صفحه یکی نیست و در حالاتی ممکن است بزرگتر از سایت صفحه باشد. ویژگی overflow مشخص می کند که چه اتفاقی برای محتوایی که بزرگتر از ناحیه ای که قرار است در آن قرار گیرد، باید بیافتد. به عنوان مثال فرض کنید متن یا عکس بزرگتر از فضای عنصر div است که در آن قرار گرفته. در این حالت overflow تعیین می کند که آیا اسکرول افقی یا عمودی رخ دهد یا خیر. به مثال زیر توجه کنید:
در این مثال، متن از ارتفاع تعیین شده برای صفحه بیشتر است ( یعنی ارتفاع متن بیشتر از 100px خواهد شد). در این حالت overflow: scroll به صفحه دستور می دهد که باید اسکرول بخورد. نتیجه کد بالا به شکل زیر است:
ویژگی overflow مشخص می کند که وقتی محتوا برای قرار گرفتن در یک ناحیه زیادی بزرگ است بریده شود یا در آن از اسکرول استفاده شود.
ویژگی overflow مقادیر زیر را دارد:
- visible - متن بریده نمی شود و محتوا در بیرون عنصر قرار می گیرد.
- hidden - متن بریده شده و بقیه متن قابل نمایش نخواهد بود.
- scroll - متن بریده شده و به بقیه متن اسکرول اضافه می شود.
- auto - مانند قسمت بالا می باشد با این تفاوت که فقط وقتی ضروری است اسکرول اضافه می شود.
مقدار visible برای ویژگی overflow
بصورت پیش فرض overflow، visible است، یعنی متن اضافی برش نخورده و بیرون فضای عنصر نشان داده می شود:
در این مثال مشاهده می کنید که متن بیشتر از فضای مشخص شده برای آن است و مقدار overflow نیز برابر با visible قرار داده شده است. بنابراین، متن از عنصر بیرون زده و نمایش داده می شود. به مثال زیر توجه کنید:
مقدار hidden برای ویژگی overflow
در این مثال مشاهده می کنید که متن بیشتر از فضای مشخص شده برای آن است و مقدار overflow نیز برابر با hidden قرار داده شده است. بنابراین، متن از عنصر بیرون زده و اما ادامه متن نمایش داده نمی شود. به مثال زیر توجه کنید:
در مثال بالا، متن بریده شده و بقیه ی متن قابل نمایش نخواهد بود.
مقدار scroll برای ویژگی overflow
با قرار دادن مقدار overflow روی scroll، متن بریده شده و به بقیه متن اسکرول می شود. توجه داشته باشید که مقدار scroll هم اسکرول عمودی و هم اسکرول افقی را اضافه می کند، حتی اگر نیاز نباشد.
در این مثال مقدار overflow برابر با scroll شده است و همانطور که مشاهده می کنید، هم اسکرول افقی و هم اسکرول عمودی اضافه شده است. نتیجه کد بالا به شکل زیر است:
مقدار auto برای ویژگی overflow
مانند قسمت بالا است با این تفاوت که فقط وقتی نیاز باشد، اسکرول اضافه می شود.
در این مثال، اسکرول به صورت خودکار زمانی که نیاز به آن باشد، اضافه می شود. نتیجه را می توانید در زیر مشاهده کنید:
overflow-x و overflow-y
ویژگی های overflow-x و overflow-y تعیین می کنند که متن اضافی محتوا، افقی یا عمودی تغییر کند (یا هردو):
overflow-x برای متن اضافی چپ و راست محتوا و overflow-y برای متن اضافی بالا و پایین محتوا می باشد.
نتیجه کد بالا به شکل زیر است:
