1

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.

z--
  • 2,186
  • 17
  • 33
  • 4
    What do you mean together? On top of each other, side by side? You're question isn't too clear. – David Barker Aug 07 '13 at 18:06
  • 2
    "*appear together at the end of a page or then are moved together to the next page*" Are you talking about print? Not sure what "next page" would mean otherwise. – Wesley Murch Aug 07 '13 at 18:11
  • [Like this](http://jsfiddle.net/QuUd7/)? – Vucko Aug 07 '13 at 18:12
  • can't you just put {page-break-after:avoid} on the for your li? or put a class on the li needed and apply the page break avoid – Huangism Aug 07 '13 at 21:05
  • @Huangism I have updated the question with your suggestion. It does not work but I found a solution which I have included below as an answer to the question. – z-- Aug 08 '13 at 11:35
  • 1
    @Hannes my mistake it's supposed to say page break insie not after in my prev comment, I copied it and did not notice it was after and not inside – Huangism Aug 08 '13 at 12:23
  • OK, thank you, maybe you can up-vote the corresponding answer then and btw the question as well as I now have put in enough reseach effort I assume. I later then will accept the answer. – z-- Aug 08 '13 at 13:09

3 Answers3

3

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.

Community
  • 1
  • 1
z--
  • 2,186
  • 17
  • 33
1

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.

Community
  • 1
  • 1
Alexander Lozada
  • 4,019
  • 3
  • 19
  • 41
  • I mean no page break between the paragraph

    and the paragraph

    when printing. Before and after is fine.

     – z-- Aug 07 '13 at 18:41
1

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

R Lacorne
  • 604
  • 5
  • 10
  • I have tried .nw {page-break-after:avoid} and updated the question. But it does not work. – z-- Aug 08 '13 at 11:19