این آموزش در تاریخ ۱۴۰۰/۱۰/۲۸ آپدیت شده است.
آموزش ویژگی break-inside در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی break-inside در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی break-inside در CSS
با استفاده از ویژگی break-inside در CSS میتوان از شکسته شدن صفحه از داخل تصاویر، جداول ، لیست ها و کدها به صفحه بعد جلوگیری کرد. یعنی در واقع میتوان از تکه تکه شدن تصویر، جدول و لیست ها و کدها به صفحه بعد ( در هنگام چاپ صفحه ) جلوگیری کرد.
برای اینکه بطور کامل نقطه / منطقه شکست یک صفحه را درک نمایید و همچنین اینکه چجوری یک تصویر ممکنه شکسته شود ، لطفا به تصویر زیر توجه نمایید : (همانطور که مشاهده مینمایید بخشی از تصویر بهمراه صفحه شکسته شده و به صفحه بعد رفته)
این ویژگی در CSS3 اضافه شده تا بتواند ویژگی page-break-inside را کمی گسترش بدهد ، یعنی در واقع ویژگی page-break-inside همان ویژگی break-inside می باشد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی break-inside را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : در مثال زیر گفتیم تصاویر موجود در صفحه ، بعد از اینکه بروی کاغذ پرینت ( Print ) شد، اجازه نده شکستن صفحه در داخل تصویر اتفاق بیوفته.
در نتیجه وقتی صفحه میخواست شکست بخوره و تصویر هم دقیقا در همون منطقه شکست وجود داشت، از شکست خوردن تصویر جلوگیری میکنه و دیگه تصویر تکه تکه نمیشه.
|
1 2 3 4 5 6 |
@media print { img { display: block; break-inside: avoid; } } |
Free-Learn
جدول مشخصات ویژگی break-inside در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.breakInside=”avoid”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی break-inside در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| break-inside | ۵۰ | ۶۵ | ۳۷ | ۱۰ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
break-inside: auto|avoid|avoid-column|avoid-page|avoid-region|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی break-inside در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش فرض – عناصر،ستون ها و صفحات بصورت خودکار شکسته میشوند |
| avoid | از شکسته شدن صفحه در داخل ستون ها ،صفحات و عناصر جلوگیری میکند |
| avoid-column | از شکسته شدن صفحه در داخل ستون ها جلوگیری میکند |
| avoid-page | از شکسته شدن صفحه در داخل عناصر میکند |
| avoid-region | جلوگیری از ایجاد منطقه شکست صفحه در داخل عناصر |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- این ویژگی معمولا بروی صفحاتی که قرار است چاپ / Print شوند عمل میکند، یعنی در واقع برای مشاهده عملکرد این ویژگی شما باید به کاغذی که چاپ یا پرینت شده نگاه کنید.
- مقدار column معمولا بروی ویژگی columns عمل میکند ولی بازم ممکنه دربرخی از مرورگرها پشتیبانی نشه.
