🎁 تخفیفات عیدانه دوره های آموزشی آتریا را از دست ندهید🎁

آموزش طراحی سایت - ویژگی Overflow در CSS

در این بخش از آموزش طراحی سایت به آموزش ویژگی Overflow در CSS می پردازیم.

آموزش طراحی سایت - ویژگی Overflow در CSS

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

آموزش طراحی سایت

در این مثال، متن از ارتفاع تعیین شده برای صفحه بیشتر است ( یعنی ارتفاع متن بیشتر از 100px خواهد شد). در این حالت overflow: scroll به صفحه دستور می دهد که باید اسکرول بخورد. نتیجه کد بالا به شکل زیر است:

آموزش overflow در css

ویژگی overflow مشخص می کند که وقتی محتوا برای قرار گرفتن در یک ناحیه زیادی بزرگ است بریده شود یا در آن از اسکرول استفاده شود.

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

  • visible  - متن بریده نمی شود و محتوا در بیرون عنصر قرار می گیرد.
  • hidden  - متن بریده شده و بقیه متن قابل نمایش نخواهد بود.
  • scroll  - متن بریده شده و به بقیه متن اسکرول اضافه می شود.
  • auto  - مانند قسمت بالا می باشد با این تفاوت که فقط وقتی ضروری است اسکرول اضافه می شود.

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

بصورت پیش فرض overflow، visible است، یعنی متن اضافی برش نخورده و بیرون فضای عنصر نشان داده می شود:

آموزش css

در این مثال مشاهده می کنید که متن بیشتر از فضای مشخص شده برای آن است و مقدار overflow نیز برابر با visible قرار داده شده است. بنابراین، متن از عنصر بیرون زده و نمایش داده می شود. به مثال زیر توجه کنید:

آموزش overflow در css


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

در این مثال مشاهده می کنید که متن بیشتر از فضای مشخص شده برای آن است و مقدار overflow نیز برابر با hidden قرار داده شده است. بنابراین، متن از عنصر بیرون زده و اما ادامه متن نمایش داده نمی شود. به مثال زیر توجه کنید:

آموزش css

در مثال بالا، متن بریده شده و بقیه ی متن قابل نمایش نخواهد بود.


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

با قرار دادن مقدار overflow روی scroll، متن بریده شده و به بقیه متن اسکرول می شود. توجه داشته باشید که مقدار scroll هم اسکرول عمودی و هم اسکرول افقی را اضافه می کند، حتی اگر نیاز نباشد.

در این مثال مقدار overflow برابر با scroll شده است و همانطور که مشاهده می کنید، هم اسکرول افقی و هم اسکرول عمودی اضافه شده است. نتیجه کد بالا به شکل زیر است:

آموزش overflow در css


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

مانند قسمت بالا است با این تفاوت که فقط وقتی نیاز باشد، اسکرول اضافه می شود.

آموزش overflow در css

در این مثال، اسکرول به صورت خودکار زمانی که نیاز به آن باشد، اضافه می شود. نتیجه را می توانید در زیر مشاهده کنید:

آموزش طراحی سایت


 overflow-x  و  overflow-y

ویژگی های overflow-x و overflow-y تعیین می کنند که متن اضافی محتوا، افقی یا عمودی تغییر کند (یا هردو):

overflow-x برای متن اضافی چپ و راست محتوا و overflow-y برای متن اضافی بالا و پایین محتوا می باشد.

آموزش overflow در css

نتیجه کد بالا به شکل زیر است:

آموزش overflow در css

آموزش طراحی سایت آموزش ویژگی over flow در css آموزش css آموزش over flow در طراحی وب سایت آموزش overflow

مقالات این دسته بندی