خصائص انقسام قبل

تعريف والاستخدام

تحدد خاصية break-before ما إذا كان يجب حدوث صفحة جديدة، أو إنهاء العمود، أو إنهاء المنطقة قبل العنصر المحدد.

تمدد خاصية break-before ميزة page-break-before في CSS2.

من خلال استخدام break-before، يمكنك إخبار المتصفح بأن يقوم بإنهاء الصفحة، أو العمود، أو المنطقة قبل العنصر الذي تم تطبيق break-after عليه، أو تجنب تفكيك العنصر وتشريعه عبر صفحتين.

مثال

تقوم ب插入 وسم الصفحة قبل علامة <h1>:

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

نسيج سي إس إس

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

قيمة الخاصية

القيمة الوصف
auto افتراضي. يتم التصفية التلقائية للصفحات، الأعمدة، والمناطق قبل العنصر.
all أدرج دائمًا علامة الفصل قبل الصندوق الرئيسي.
always أدرج دائمًا علامة الفصل قبل العنصر (page-break).
avoid تجنب الفصل بين الصفحات، الأعمدة، والمناطق.
avoid-column تجنب الفصل قبل العنصر.
avoid-page تجنب الفصل قبل العنصر.
avoid-region تجنب الفصل قبل العنصر.
column أدرج دائمًا علامة الفصل قبل العنصر.
left أدرج أو اثنين من علامات الفصل قبل العنصر لتحويل الصفحة التالية إلى الصفحة اليسرى.
page أدرج دائمًا علامة الفصل قبل العنصر.
recto أدرج أو اثنين من علامات الفصل في بداية الصندوق الرئيسي لتحويل الصفحة التالية إلى الصفحة recto.
region أدرج دائمًا علامة الفصل قبل العنصر.
right أدرج أو اثنين من علامات الفصل قبل العنصر لتحويل الصفحة التالية إلى الصفحة اليمنى.
verso أدرج أو اثنين من علامات الفصل في بداية الصندوق الرئيسي لتحويل الصفحة التالية إلى صفحة verso.
initial ضع هذه الخاصية على قيمتها الافتراضية. انظر إلى: initial.
inherit ورثة هذه الخاصية من عنصر الأب. انظر إلى: inherit.

تفاصيل التقنية

القيمة الافتراضية: auto
الوراثة: لا
صناعة الرسوم المتحركة: غير مدعوم. انظر إلى:خصائص الرسوم المتحركة.
الإصدار: 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