CSS Color
CSS Properties
@charset @font-face @font-feature-values @import @keyframes @media align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside caption-side caret-color clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-feature-settings font-kerning font-language-override font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens image-rendering isolation justify-content left letter-spacing line-break line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width mix-blend-mode object-fit object-position opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-wrap overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right scroll-behavior tab-size table-layout text-align text-align-last text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-orientation text-overflow text-shadow text-transform text-underline-position title top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space widows width word-break word-spacing word-wrap writing-mode
CSS - break-after

break-after

Specifies whether or not a page-, column-, or region-break should occur after the specified element

Usually used in print @media to specify a break in the content.

You can test the following demo's by print previewing this page, it will show the examples of page breaks after the p tags.

Property Variable Name

break-after

Available Values for break-after

auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit

Examples Using break-after values

Example using break-after auto

Example using break-after auto

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-1 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-1-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-1-inner-one p {
    break-after:auto;
  }
}
</style>

<h2>Example using break-after auto</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-1'>
  <div class='demo-box-1-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after all

Example using break-after all

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-2 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-2-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-2-inner-one p {
    break-after:all;
  }
}
</style>

<h2>Example using break-after all</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-2'>
  <div class='demo-box-2-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after always

Example using break-after always

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-3 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-3-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-3-inner-one p {
    break-after:always;
  }
}
</style>

<h2>Example using break-after always</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-3'>
  <div class='demo-box-3-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after avoid

Example using break-after avoid

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-4 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-4-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-4-inner-one p {
    break-after:avoid;
  }
}
</style>

<h2>Example using break-after avoid</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-4'>
  <div class='demo-box-4-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after avoid-column

Example using break-after avoid-column

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-5 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-5-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-5-inner-one p {
    break-after:avoid-column;
  }
}
</style>

<h2>Example using break-after avoid-column</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-5'>
  <div class='demo-box-5-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after avoid-page

Example using break-after avoid-page

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-6 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-6-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-6-inner-one p {
    break-after:avoid-page;
  }
}
</style>

<h2>Example using break-after avoid-page</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-6'>
  <div class='demo-box-6-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after avoid-region

Example using break-after avoid-region

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-7 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-7-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-7-inner-one p {
    break-after:avoid-region;
  }
}
</style>

<h2>Example using break-after avoid-region</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-7'>
  <div class='demo-box-7-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after column

Example using break-after column

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-8 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-8-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-8-inner-one p {
    break-after:column;
  }
}
</style>

<h2>Example using break-after column</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-8'>
  <div class='demo-box-8-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after left

Example using break-after left

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-9 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-9-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-9-inner-one p {
    break-after:left;
  }
}
</style>

<h2>Example using break-after left</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-9'>
  <div class='demo-box-9-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after page

Example using break-after page

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-10 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-10-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-10-inner-one p {
    break-after:page;
  }
}
</style>

<h2>Example using break-after page</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-10'>
  <div class='demo-box-10-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after recto

Example using break-after recto

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-11 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-11-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-11-inner-one p {
    break-after:recto;
  }
}
</style>

<h2>Example using break-after recto</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-11'>
  <div class='demo-box-11-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after region

Example using break-after region

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-12 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-12-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-12-inner-one p {
    break-after:region;
  }
}
</style>

<h2>Example using break-after region</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-12'>
  <div class='demo-box-12-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after right

Example using break-after right

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-13 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-13-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-13-inner-one p {
    break-after:right;
  }
}
</style>

<h2>Example using break-after right</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-13'>
  <div class='demo-box-13-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after verso

Example using break-after verso

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-14 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-14-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-14-inner-one p {
    break-after:verso;
  }
}
</style>

<h2>Example using break-after verso</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-14'>
  <div class='demo-box-14-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after initial

Example using break-after initial

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-15 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-15-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-15-inner-one p {
    break-after:initial;
  }
}
</style>

<h2>Example using break-after initial</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-15'>
  <div class='demo-box-15-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Example using break-after inherit

Example using break-after inherit

Here is an example using different break-after values

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.

Code

<style>
.demo-box-16 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  width:100%;
  transition: all 0.3s;
  padding:20px;
}
.demo-box-16-inner {
  font-size:14px;
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:120px;
  width:120px;
  box-shadow:0px 5px 10px #000;
  border:3px solid #EEE;
  border-radius:3px;
}
@media print {
  .demo-box-16-inner-one p {
    break-after:inherit;
  }
}
</style>

<h2>Example using break-after inherit</h2>
<p>Here is an example using different break-after values</p>
<div class='demo-box-16'>
  <div class='demo-box-16-inner-one'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>

    <p>Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
  </div>
</div>
Add Comment
Type in a Nick Name here