Print Utilities

Utility classes for controlling print behavior. These classes only apply when printing (using @media print).

Hide elements

Hide elements when printing:

<div class="af-no-print">This content won't print</div>

Show only when printing

Show elements only when printing (hidden on screen):

<div class="af-print-only">This only appears when printing</div>

Page breaks

Force a page break after an element:

<div class="af-page-break">Content after this will start on a new page</div>

Prevent content from breaking across pages:

<div class="af-page-break-avoid">This block won't break across pages</div>

Link styling

Links automatically show their URLs when printing:

<a href="https://example.com">Visit Example</a>
<!-- Prints as: "Visit Example (https://example.com)" -->

Available classes

• af-no-print - Hide element when printing
• af-print-only - Show element only when printing (hidden on screen)
• af-page-break - Force page break after element
• af-page-break-avoid - Prevent page break inside element

Print preview demo

These classes only take effect on paper, so there is nothing to see on screen. Open your browser’s Print Preview on this page to watch the first block disappear and the last one stay intact.

This content won’t print (has af-no-print class)

This content will print normally.

Use af-no-print to hide elements when printing.

Use af-page-break to force a page break.

Use af-page-break-avoid to prevent breaking inside an element.

This block won’t break across pages (af-page-break-avoid)

All content in this block stays together when printing.

Note: Print styles only apply when printing. Use browser’s Print Preview to see the effect.