CODEWITHSUNDEEP
htmlcssfirefox
z--
z--

Reputation: 2236

No page breaks between paragraphs in print style sheet

I have a HTML fragment, a list item of a long ordered list

<li>
    <p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
    <p class="English">The elders discussed the matter.</p>
</li>

How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.

How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?

I use

 .nw {page-break-after:avoid;}

but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.

Upvotes: 1

Views: 2674

Answers (3)

z--
z--

Reputation: 2236

The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.

A solution is the following.

li {
      page-break-inside: avoid;
   }

It works fine in Firefox.

Upvotes: 3

Alexander
Alexander

Reputation: 4219

Do you mean to have no break between the p class? You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,

<li>
    <p>
       <span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
       <span class="English">The elders discussed the matter.</span>
    </p>
</li>

Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs

Is this what you meant?

According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.

Upvotes: 1

R Lacorne
R Lacorne

Reputation: 604

There are multiple factors in play, first in importance: The user's printer.

There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).

You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.

I suggest you read this: http://davidwalsh.name/css-page-breaks

And this :

http://www.w3schools.com/cssref/pr_print_pageba.asp

Upvotes: 1

Related Questions