ویژگی break-inside CSS

تعریف و استفاده

ویژگی break-inside تعیین می‌کند که آیا در داخل عنصر مشخص شده باید صفحات (page-break)، ستون‌ها (column-break) یا مناطق (region-break) رخ دهد یا خیر.

ویژگی break-inside گسترش یافته‌ای از ویژگی page-break-inside در CSS2 است.

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

مثال

جلوگیری از صفحات در داخل عنصر <img>:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

جملات CSS

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

مقدار ویژگی

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

جزئیات فنی

مقدار پیش‌فرض: auto
ارث: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن。
نسخه: CSS3
جملات برنامه‌نویسی JavaScript: object.style.breakInside="always"

مثال‌های بیشتر

جلوگیری از صفحات در داخل عناصر <table>،<ul>،<ol>:

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.

Chromium IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0