Adjust Page Break When Printing a Web Page to PDF

I wanted to print a web page to PDF, but some of the text was broken awkwardly between page one and two. The words were split so that the top of a word was on page one and the rest was on the next page. So I used the code inspector in Google Chrome to change the location of the page break.

Background

I was asked to develop a registration form that was very similar to one created in a previous year. With the old form offline, I opted to share a PDF of the page so the event organizer would know what information is typically posted.

When printing the PDF, however, one question was split across two pages. And the break between pages happened in the middle of a couple words (see Figure 1).

Figure 1. Note the "g" in "arrangements"

To make the PDF a bit nicer, I injected some CSS code to adjust the page break.

Note: the screenshots and directions in this post are based on Google Chrome on Windows 7.

Move Page Break

To move the page break, I right-clicked the question text that was split across two pages and clicked Inspect (see Figure 2).

Figure 2. Click Inspect

I then hovered the mouse cursor over the HTML tags surrounding the question to find a suitable tag for injecting the CSS code, which ended up being the <fieldset> tag. I right-clicked the tag and clicked Add Attribute (see Figure 3).

Figure 3. Click Add Attribute

I typed in the "style" attribute and added CSS' page-break-before rule (see Figure 4).

Figure 4. Add Style Attribute

After hitting Enter on the keyboard to commit the change, the page break appears essentially where I want it (see Figure 5).

Figure 5. Question Appears on Same Page