Print Styles

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

Live example

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.