Utilities

Print

Display

Screen and print
This paragraph is displayed on both screen and print

Screen (.ecl-u-screen-only)
This paragraph is displayed only on screen

Print (.ecl-u-print-only)
This paragraph is displayed only on print

Fullscreen
<p class="ecl-u-type-paragraph"><strong>Screen and print</strong><br />This paragraph is displayed on both screen and
  print</p>
<p class="ecl-u-type-paragraph ecl-u-screen-only"><strong>Screen (.ecl-u-screen-only)</strong><br />This paragraph is
  displayed only on screen</p>
<p class="ecl-u-type-paragraph ecl-u-print-only"><strong>Print (.ecl-u-print-only)</strong><br />This paragraph is
  displayed only on print</p>

Try it yourself on the playground

Playground

Page break

Note: in order to see the page breaks, you should open the demo in full screen, and open the print preview in your brower.

A paragraph with no page break specified:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis urna vitae justo semper, eget lacinia elit luctus. Donec euismod tincidunt ornare.

A paragraph with a forced page break before (.ecl-u-break-before-page):
Nam tempor ex turpis, at convallis justo bibendum id. Vivamus convallis lacus vel magna consectetur, id congue felis ultrices. Aenean vitae ligula vel justo sagittis venenatis.

A paragraph with a forced page break after (.ecl-u-break-before-after):
Nunc quis rhoncus urna. Donec nec commodo dolor. Vestibulum sed luctus erat. Etiam consectetur consequat sem eu finibus.

A paragraph with no page break specified:
Proin egestas facilisis leo, a consequat lectus congue vel. Vestibulum placerat leo id urna commodo finibus. Integer consectetur pulvinar libero quis luctus.

A paragraph with no page break inside (.ecl-u-break-inside-avoid):
Nullam in convallis massa. Nullam non lacus id ipsum congue vestibulum. Praesent sit amet nisl at nisi rutrum rutrum. Nullam imperdiet nisl vel lacus laoreet sodales.

Fullscreen

Try it yourself on the playground

Playground