overflow در CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 25 بهمن 1399با استفاده از خاصیت overflow در CSS، می توانید رفتار عنصر را در مواردی که محتوا نمی تواند در مرزهای آن قرار بگیرد ، دستکاری کنید. در واقع خلاصه ای برای دو زیر خاصیت overflow CSS است:
- سرریز-x
- سرریز کردن
از هر دو آن ها می توان به طور جداگانه استفاده کرد:
div {
overflow-x: hidden;
}div {
overflow-y: hidden;
}مقادیر overflow در CSS
نحو سرریز مانند سایر مختصرهای CSS است – شما باید مقادیر هر دو زیرمجموعه را بدون تایپ واقعی نام آن ها بنویسید:
سرریز: overflow-x overflow-y؛
overflow-x نحوه واکنش دو طرف چپ و راست یک ظرف به محتوای سرریز شده و overflow-y را تعریف می کند. همین کار را برای لبه های بالا و پایین انجام می دهد. اگر فقط یک مقدار تعریف کنید ، برای هر دو زیر خاصیت اعمال می شود.
overflow-x و overflow-y مقادیر یکسانی را می گیرند:
| Description | Value |
| مقدار پیش فرض محتوا کوتاه نشده است و ممکن است از جعبه padding سرریز شود | visible |
| محتوا را می توان کوتاه کرد و کاربر فقط می تواند به صورت برنامه نویسی پیمایش کند | hidden |
| محتوا قابل برش است و کاربر نمی تواند پیمایش کند (حتی به صورت برنامه ریزی) | clip |
| محتوا را می توان کوتاه کرد ، اما کاربر می تواند با استفاده از نوار پیمایش در CSS پیمایش کند | scroll |
| رفتار Element به مرورگر بستگی دارد | auto |
مقابله با overflow
متن CSS ویژگی CSS text-overflow چگونگی اطلاع رسانی مرورگر به کاربر در مورد وجود محتوای متن سرریز شده را تعریف می کند:
div {
text-overflow: ellipsis;
}برای استفاده از این ویژگی ، باید از هر سه مقدار ممکن یکی را انتخاب و تعریف کنید:
text-overflow: مقدار؛
| Description | Value |
| مقدار پیش فرض متن حتی در وسط کاراکتر / td> در لبه ظرف بریده می شود | clip |
| یک بیضی (‘…’) در انتهای متن بریده شده درون ظرف نشان داده شده است | ellipsis |
| یک رشته مشخص شده در انتهای متن بریده شده درون ظرف نشان داده شده است | string |
پشتیبانی از مرورگر
این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.
در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟