CSS بریک-بیفور پرپریٹی
- پیشین پیگه break-after
- 下一页 break-inside
تعریف و استفاده
ویژگی 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;
مقدار ویژگی
| مقادیر | توضیح |
|---|---|
| 자동 | پیشفرض. به صورت خودکار صفحات، ستونها و مناطق در جلوی عنصر تقسیم میشوند. |
| all | همیشه یک علامت ترتیبی را فوری قبل از جعبه اصلی وارد کنید. |
| always | همیشه یک علامت ترتیبی در جلوی عنصر وارد کنید (page-break). |
| avoid | از وارد کردن علامت ترتیبی در جلوی عنصر خودداری کنید تا صفحه، ستون و منطقه قطع نشوند. |
| avoid-column | از وارد کردن علامت ترتیبی در جلوی عنصر خودداری کنید. |
| avoid-page | از وارد کردن علامت ترتیبی در جلوی عنصر خودداری کنید. |
| avoid-region | از وارد کردن علامت ترتیبی در جلوی عنصر خودداری کنید. |
| column | همیشه یک علامت ترتیبی در جلوی عنصر وارد کنید تا صفحات به صورت ستونهای مجزا شکلگیری کنند. |
| left | یک یا دو علامت ترتیبی در جلوی عنصر وارد کنید تا صفحه بعدی به عنوان صفحه چپ شکلگیری کند. |
| page | همیشه یک علامت ترتیبی در جلوی عنصر وارد کنید. |
| recto | یک یا دو علامت ترتیبی در جلوی جعبه اصلی وارد کنید تا صفحه بعدی به عنوان صفحه recto شکلگیری کند. |
| region | همیشه یک علامت ترتیبی در جلوی عنصر وارد کنید. |
| 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 |
- پیشین پیگه break-after
- 下一页 break-inside
