ویژگی overflow در CSS

overflow Property

ویژگی کوتاه شده overflow در CSS مشخص می کند، هنگامی که محتوای عنصر بیشتر از ظرفیت و اندازه ی عنصر باشد چه اتفاقی رخ دهد. overflow دو ویژگی overflow-x و overflow-y را در بر میگیرد.

این ویژگی تنظیماتی برای برش، نمایش اسکرول بار و نمایش محتوا خارج از محدوده عنصر است.

نحوه نوشتار

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

نکته: برای اعمال ویژگی overflow باید عنصر دارای ارتفاع مشخص و تعیین شده باشد.

این ویژگی یک یا دو مقدار می پذیرد. اگر دو مقدار پذیرفت، اولی برای overflow-x و دومی برای overflow-y در نظر گرفته می شود. در غیر اینصورت یک مقدار برای هر دوی این ویژگی ها در نظر گرفته می شود.

overflow-x

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

overflow-x: auto

overflow-y

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

overflow-y: hidden;

مقادیر

visible​

محتوا برش نمی خورد و اگر اندازه محتوا بیشتر از ظرفیت عنصر باشد، سر ریز کرده و و خارج از محدوده عنصر نمایش داده شود.

hidden​

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

scroll​

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

auto​

در این حالت بسته به میزان محتوا، در صورت سر ریزی، مرورگر به عنصر اسکرول بار اضافه می کند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="scroll">
      <span>overflow: scroll</span><br />
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>
<div class="hidden">
      <span>overflow: hidden</span><br />
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</div>
<div class="auto">
      <span>overflow: auto</span><br />
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>
<div class="visible">
      <span>overflow: auto</span><br />
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری
</div>

css

 div {
    width: 150px;
    height: 130px;
    margin: 20px 0 0 20px;
    direction: rtl;
    text-align: right;
    border: 3px solid tomato;
    padding: 10px;
}
span {
    font-weight: bold;
    color: blue;
}
.scroll {
    overflow: scroll; 
}
.hidden {
    overflow: hidden; 
}
.auto {
    overflow: auto; 
}
.visible {
    overflow: visible; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.