آموزش ویژگی break-inside در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی break-inside در CSS با من همراه باشید.

آموزش ویژگی break-inside در CSS

Free-Learn

ویژگی break-inside در CSS

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

برای اینکه بطور کامل نقطه / منطقه شکست یک صفحه را درک نمایید و همچنین اینکه چجوری یک تصویر ممکنه شکسته شود ، لطفا به تصویر زیر توجه نمایید : (همانطور که مشاهده مینمایید بخشی از تصویر بهمراه صفحه شکسته شده و به صفحه بعد رفته)

آموزش ویژگی break-inside در CSS
صفحه ای که چاپ / پرینت شده

این ویژگی تنها بروی صفحه چاپ یا صفحه ای که قرار است چاپ / پرینت شود عمل میکند.

این ویژگی در CSS3 اضافه شده تا بتواند ویژگی page-break-inside را کمی گسترش بدهد ، یعنی در واقع ویژگی page-break-inside همان ویژگی break-inside می باشد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی break-inside را در زبان CSS مشاهده نمایید.

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

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

Free-Learn

جدول مشخصات ویژگی break-inside در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.breakInside=”avoid”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی break-inside در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
break-inside ۵۰ ۶۵ ۳۷ ۱۰ ۱۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی break-inside در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – عناصر،ستون ها و صفحات بصورت خودکار شکسته میشوند.
avoid از شکسته شدن صفحه در داخل ستون ها ،صفحات و عناصر جلوگیری میکند.
avoid-column از شکسته شدن صفحه در داخل ستون ها جلوگیری میکند.
avoid-page از شکسته شدن صفحه در داخل عناصر میکند.
avoid-region جلوگیری از ایجاد منطقه شکست صفحه در داخل عناصر.
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی فقط بروی صفحاتی که قرار است چاپ / Print شوند عمل میکند، یعنی در واقع برای مشاهده عملکرد این ویژگی شما باید به کاغذی که چاپ یا پرینت شده نگاه کنید.

Free-Learn

دریافت PDF یا پرینت این مطلب