Print - Utilities

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

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

<p class="ecl-u-type-paragraph"><strong>A paragraph with no page break specified:</strong><br />
<p class="iRCJJeCgSXzX9ymLg1TH">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis
  urna vitae justo semper, eget lacinia elit luctus. Donec euismod tincidunt
  ornare.</p>
</p>
<p class="ecl-u-type-paragraph ecl-u-break-before-page"><strong>
    <p class="iRCJJeCgSXzX9ymLg1TH">A paragraph with a forced page break before (.ecl-u-break-before-page):</p>
  </strong><br />
<p class="iRCJJeCgSXzX9ymLg1TH">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.</p>
</p>
<p class="ecl-u-type-paragraph ecl-u-break-after-page"><strong>
    <p class="iRCJJeCgSXzX9ymLg1TH">A paragraph with a forced page break after (.ecl-u-break-before-after):</p>
  </strong><br />
<p class="iRCJJeCgSXzX9ymLg1TH">Nunc quis rhoncus urna. Donec nec commodo dolor. Vestibulum sed luctus erat.
  Etiam consectetur consequat sem eu finibus.</p>
</p>
<p class="ecl-u-type-paragraph"><strong>A paragraph with no page break specified:</strong><br />
<p class="iRCJJeCgSXzX9ymLg1TH">Proin egestas facilisis leo, a consequat lectus congue vel. Vestibulum
  placerat leo id urna commodo finibus. Integer consectetur pulvinar libero
  quis luctus.</p>
</p>
<p class="ecl-u-type-paragraph"><strong>
    <p class="iRCJJeCgSXzX9ymLg1TH">A paragraph with no page break inside (.ecl-u-break-inside-avoid):</p>
  </strong><br />
<p class="iRCJJeCgSXzX9ymLg1TH">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.</p>
</p>

Try it yourself on the playground

Playground