How to prevent page-break inside an eBook?

No Comments

How to prevent page-break within text?

To prevent the page-breaks as in below screenshot you can apply the steps as mentioned below.

Page-break-inside-1
Step 1: Open your eBook in Sigil or similar software.

Step 2: Open the HTML file having page-breaks. Now, in container in which you want to prevent page break, define a class for that.

HTML

<div class=”avoidPageBreak”>

<h3 class=”exHead”><span style=”color:gray;”>Exercise 1 :</span> Recall the Words</h3>

<ul>

<li style=”padding-top:5px;”>Close your eyes and from memory, meditate on the words listed on page 6.</li>

<li>Write down the first words from the list that pop into your head (up to five).</li>

 <li>These are your “seed words” to help you redecorate your canvas.</li>

<li>Write down what comes to mind afterwards.</li>

<li>From here, you will start a new painting on your life’s canvas.</li>

<li>Electrification starts now. Change starts right here, right now!</li>

</ul>

</div>

Step 3: Apply CSS property of “page-break-inside” to container tag. Set its value to “avoid”.

CSS

.avoidPageBreak {

font-family: “GillSans”;

font-weight: normal;

border-top: 4px solid black;

margin-top: 20px;

background-color: #dddddd;

padding-left: 20px;

padding-right: 20px;

padding-bottom: 20px;

-webkit-hyphens: none;

-epub-hyphens: none;

}

Updated CSS

.avoidPageBreak {

font-family: “GillSans”;

font-weight: normal;

page-break-inside:avoid;

border-top: 4px solid black;

margin-top: 20px;

background-color: #dddddd;

padding-left: 20px;

padding-right: 20px;

padding-bottom: 20px;

-webkit-hyphens: none;

-epub-hyphens: none;

}

Step 4: Save your file. Notice the change in eBook pages. Empty space is appended to the page and container floats to next page .

Result:

Page-break-inside-2

How to prevent page-break between Image and Caption?

Page-break-inside-3

Step 1: Open your eBook in Sigil or similar software.

Step 2: Open the HTML file having page-breaks. Now, in container in which you want to prevent page break, define a class for that.

HTML

<div class=”avoidPageBreak”>

<div style=”width: 40%; height: auto; margin: 0 auto; text-align: center;”>

<img alt=”projects2″ style=”width:100%;  height:auto;” src=”../Images/projects2.jpg”/><br/>Image Caption Text

</div>

</div>

Step 3: Apply CSS property of “page-break-inside” to outer division. Set its value to “avoid”.

.avoidPageBreak{
page-break-inside:avoid;
}

Step 4: Save your file. Notice the change in eBook pages. Empty space is appended to the page and image floats to next page along with its text.

Page-break-inside-4

 

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

More from our blog

See all posts