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
PlaygroundPage 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.
<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