break-after

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

Example using break-after auto

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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

Here is an example using different break-after values

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>