ویژگی break-before CSS

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

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

ویژگی break-before ویژگی page-break-before در CSS2 را گسترش داده است.

با استفاده از break-before، می‌توانید به مرورگر اطلاع دهید که در قبل از علامت‌هایی که break-after بر روی آن‌ها اعمال شده است، صفحه، ستون یا منطقه‌ای را قطع کنید، یا از قطع کردن علامت و پرش به صفحه بعدی جلوگیری کنید.

مثال

همیشه یک پیچیدگی در قبل از علامت <h1> قرار دهید:

@media print {
  h1 {
    break-before: always;
  }
}

زبان CSS

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

مقدار ویژگی

مقدار توضیح
자동 پیش‌فرض. خودکار انجام پیگرف، column و region در جلوی عنصر.
all همیشه یک پیگرف را در جلوی جعبه اصلی قرار دهید.
always همیشه یک پیگرف (page-break) را در جلوی عنصر قرار دهید.
avoid از قطع صفحه، column و region در جلوی عنصر خودداری کنید.
avoid-column از قرار دادن column در جلوی عنصر خودداری کنید.
avoid-page از قرار دادن پیگرف در جلوی عنصر خودداری کنید.
avoid-region از قرار دادن region در جلوی عنصر خودداری کنید.
column همیشه یک column-break: در جلوی عنصر قرار دهید.
left یک یا دو پیگرف را در جلوی عنصر قرار دهید تا صفحه بعد به عنوان صفحه چپ فرمت شود.
page همیشه یک پیگرف را در جلوی عنصر قرار دهید.
recto یک یا دو پیگرف را در جلوی جعبه اصلی قرار دهید تا صفحه بعد به عنوان صفحه recto فرمت شود.
region همیشه یک region-break: در جلوی عنصر قرار دهید.
right یک یا دو پیگرف را در جلوی عنصر قرار دهید تا صفحه بعد به عنوان صفحه راست فرمت شود.
verso یک یا دو پیگرف را در جلوی جعبه اصلی قرار دهید تا صفحه بعد به عنوان صفحه verso فرمت شود.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: مقدار اولیه。
وراثت از عنصر والد این ویژگی را ارث می‌برد. به: وراثت。

جزئیات فنی

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

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

مثال

برای اطمینان از اینکه تمام فصل‌های جدید در زمان چاپ از صفحه صحیح (مثلاً در کتاب) شروع شوند، می‌توانید از break-before: برای تمام عناصر <h1> استفاده کنید:

@media print {
  h1 {
    break-before: right;
  }
}

مثال

همیشه یک region-break: در قبل از <ul> در region قرار دهید:

.region ul {
    break-before: region;
  }
}

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

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

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