سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش overflow در CSS با من همراه باشید.
با استفاده از ویژگی overflow در CSS می توان ویژگی های زیر را بصورت خلاصه نوشت، و در کل با استفاده از این ویژگی می توان مشخص کرد که وقتی یک عنصر سَرریز ( در لغت Overflow ) شد ، اون محتوای سرریز شده چگونه نمایش داده شود.
- overflow-x
- overflow-y
بطور کلی وقتی محتوای درون یک عنصر از اندازه ارتفاع ( یعنی بصورت عمودی ) اون عنصر بیشتر باشد ، یا اگه محتوا از اندازه عرض ( یعنی بصورت افقی ) اون عنصر بیشتر باشد ، سرریز اتفاق میوفتد، و به اصطلاح میگن محتوا Overflow شده.
حال ما با استفاده از این ویژگی به راحتی می توانیم مشخص کنیم که مثلا اگه محتوا سرریز شد ، اون بخش سرریز شده چگونه نمایش داده شود، آیا مثلا مخفی ( hidden ) باشد یا مثلا کاری کنیم که وقتی محتوا سرریز شد عنصر اسکرول بندازه ( scroll )
این ویژگی فقط بروی عناصر بلاکی ( block ) کار می کند.
مثال شماره ۱ : وقتی محتوا بیشتر از اندازه ارتفاع باشه سرریز اتفاق میوفته
div{
background-color:#8AC007;
padding:3px;
height:50px;
}مثال شماره ۲ : جلوگیری از سرریز شدن محتوا با استفاده از ویژگی overflow
div{
height:50px;
overflow:auto;
}مثال شماره ۳ : مخفی کردن محتوای سرریز شده ( دیگه نه اسکرول میندازه نه از باکس میزنه بیرون )
div{
overflow:hidden;
}
| مقدار | توضیح |
|---|---|
| visible | پیش فرض – اگه محتوا از عنصر بزنه بیرون هیچ اسکرولی ایجاد نخواهد شد |
| hidden | محتوای سرریز شده مخفی خواهد شد |
| scroll | اسکرول افقی و عمودی در همه حال بروی عنصر ایجاد می شود |
| auto | بصورت خودکار و در صورت نیاز خودش اسکرول ایجاد می کند |
| initial | استفاده از مقدار پیش فرض یا اولیه |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) |
امیدواریم آموزش overflow در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام و یا در تی جوان اینستاگرام دنبال کنید.
