صفحه اصلی / آموزش CSS / بخش بیست و یکم- آموزش سرریز در CSS

بخش بیست و یکم- آموزش سرریز در CSS

قدم قبلی > < قدم بعدی

بخش بیست و یکم- آموزش سرریز در CSS

 

CSS Layout – سرریز

ویژگی سرریز CSS کنترل آنچه که با محتوایی که بیش از حد بزرگ است به یک منطقه متصل می شود.

سرریز CSS

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

دارایی سرریز دارای مقادیر زیر است:

  • قابل مشاهده – پیش فرض سرریز قطع نشده است. محتوا در خارج از جعبه عنصر ارائه می شود
  • پنهان – سرریز کپی شده است، و بقیه محتوای غیر قابل مشاهده است
  • پیمایش – سرریز کپی شده است و یک نوار پیمایش اضافه شده است تا بقیه محتوا را مشاهده کنید
  • خودکار – مشابه برای حرکت، اما آن را اضافه می کند اسکرول باریک تنها در صورت لزوم

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

توجه داشته باشید : در OS X Lion (در مک)، اسکرول های بطور پیش فرض پنهان هستند و تنها هنگام استفاده می شود (حتی اگر “overflow: scroll” تنظیم شده باشد) نشان داده می شود.

سرریز: قابل مشاهده است

به طور پیش فرض، سرریز قابل مشاهده است، به این معنی که آن بریده نشده است و خارج از جعبه عنصر ارائه می شود:

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

<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

 

سرریز: پنهان

با مقدار پنهان، سرریز کپی شده است، و بقیه محتوا پنهان است:

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

<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

 

سرریز:پیمایش

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

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

<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

سرریز: خودکار

مقدار خودکار شبیه به حرکت است، اما تنها زمانی که لازم است، نوارهای پیمایش را اضافه می کند:

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

<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: auto;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

overflow-x و overflow-y

خواص overflow-x و overflow-y مشخص می کند که آیا سرریز محتوای فقط به صورت افقی یا عمودی (یا هر دو) تغییر کند:

overflow-x مشخص می کند چه کاری با لبه های سمت چپ / راست محتوا انجام می شود.
overflow-y مشخص می کند چه کاری با لبه های بالا / پایین محتوا انجام می شود.

مثال

<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>You can also change the overflow of content horizontally or vertically.</p>
<p>overflow-x specifies what to do with the left/right edges of the content.<br>
overflow-y specifies what to do with the top/bottom edges of the content.</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

 

 

گام قبلی > < گام بعدی

نوشته بخش بیست و یکم- آموزش سرریز در CSS اولین بار در تیک تم. پدیدار شد.


منبع مطلب

این مطالب را نیز ببینید!

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

  آموزش ساخت جدول در CSS   ساخت جدول در CSS برای شروع و قبل …

دیدگاهتان را بنویسید

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