page-break-before is the legacy CSS property that has been supported since CSS2. break-before is the modern CSS3 property introduced as part of the CSS Fragmentation Module. The modern break-before property is more versatile—it works across different fragmentation contexts (pages, columns, regions), not just print. For maximum browser compatibility, it's recommended to include both properties in your CSS, with the modern property after the legacy one as a progressive enhancement.

Value mapping: page-break-before: always → break-before: page | page-break-before: avoid → break-before: avoid-page

Several common reasons can prevent page breaks from working:

• CSS not in @media print: Page break properties only take effect when printing. Ensure your styles are inside @media print { } or the browser is rendering for print.
• Display property conflicts: page-break-* properties only work on block-level elements. Elements with display: inline, display: flex, or display: grid may ignore page break rules. Set display: block on the element when printing.
• Parent container restrictions: If a parent element has overflow: hidden, page-break-inside: avoid, or similar constraints, child page breaks may be suppressed.
• Table-specific issues: For tables, apply page-break-inside: avoid to <tr> elements, not the <table> itself.
• Floating elements: Floated elements can interfere with page break calculations. Consider clearing floats before page breaks.
• Empty elements: Page breaks applied to empty <div> elements may be ignored. Use a non-breaking space   or min-height.

To prevent a table from splitting across pages, apply page-break-inside: avoid to the table rows (<tr>) rather than the table itself. However, if the table is longer than a single page, the browser will be forced to split it. In that case, you can:

• Use page-break-inside: avoid on individual <tr> elements to keep rows together.
• Use <thead> and <tbody> with display: table-header-group to repeat headers on each page.
• Consider breaking the table into smaller logical chunks with page-break-before: always on specific rows.
• For very long tables, accept the split but ensure header rows repeat using proper table structure.

left and right values are primarily used in book and document publishing where you need content to start on a specific side of a spread:

• page-break-before: left – Forces one or two page breaks until the next page is a left-facing (even-numbered) page. This is useful for starting chapters on the left side.
• page-break-before: right – Forces one or two page breaks until the next page is a right-facing (odd-numbered) page. This is the most common requirement for book chapters, which traditionally start on the right-hand page.
• These values are respected by most modern browsers and PDF generators like Prince XML, WeasyPrint, and wkhtmltopdf.
• If the document is single-sided, left and right behave the same as always in most browsers.

For the best cross-browser support, use both legacy and modern properties:

Best practice: Always include both page-break-* and break-* with the same values for maximum compatibility.

There are several ways to preview print styles without wasting paper:

1. Chrome DevTools: Open DevTools → Click the three-dot menu → More tools → Rendering → Scroll to "Emulate CSS media type" → Select print. The page will render with print styles applied.
2. Firefox DevTools: Open DevTools → Inspector → Click the page icon (Toggle print media simulation) in the top-right toolbar.
3. Browser Print Preview: Press Ctrl+P (or Cmd+P on Mac) to open the print dialog with a built-in preview.
4. Save as PDF: Instead of printing to paper, save as PDF to see exactly how page breaks will work in the final output.
5. Add visual indicators during development: Temporarily add border-top: 3px dashed red alongside your page-break-before: always rules to see breaks on screen.

Page break properties have limited support within flexbox and grid containers. The CSS specification states that page breaks only apply to block-level elements in normal flow. Flex and grid items are not in normal flow, so page-break-* may be ignored.

Workarounds:

• In your @media print styles, change the container to display: block and children to display: block with appropriate widths.
• Restructure the layout specifically for print using a mobile-first approach that degrades gracefully to block layout.
• Use break-before: page on block-level wrappers around flex/grid items.
• Consider using CSS columns with break-inside: avoid-column as an alternative for multi-column print layouts.

In the modern CSS Fragmentation specification, break-before accepts different values depending on the fragmentation context:

• break-before: page – Forces a break only in paged media (printing). This is the direct equivalent of page-break-before: always.
• break-before: always – Forces a break in all fragmentation contexts: pages, columns, and regions. This is more aggressive.
• break-before: avoid-page – Avoids a break in paged media only (equivalent to page-break-before: avoid).
• break-before: avoid-column – Avoids a break in multi-column layouts only.
• break-before: avoid – Avoids a break in all fragmentation contexts.

For print-specific styles, break-before: page is the most precise modern equivalent to page-break-before: always.