CSS and Printing:Keep Block of Text Together

CSS and Printing : Keep block of text together

I haven't ever had luck with consistently preventing something like that. It may be a bit dirty, but if the questions are usually of the sameish length can you force a page-break after every X questions?

<style type="text/css">
.pageBreak{
    page-break-before: always;
}
</style>

<question>...</question><br class="pageBreak" />
<question>...</question>

(Or apply that class to the question or whatever you want)

You can try using the page-break-inside property, but I haven't seen it be consistent as browser support for it is a mess right now:

question {
    page-break-inside:avoid;
}

CSS Printing: Avoiding cut-in-half DIVs between pages?

Using break-inside should work:

@media print {
  div {
    break-inside: avoid;
  }
}

It works on all major browsers:

• Chrome 50+
• Edge 12+
• Firefox 65+
• Opera 37+
• Safari 10+

Using page-break-inside: avoid; instead should work too, but has been exactly deprecated by break-inside: avoid.

Keep an HTML element from spanning multiple pages when printed

EDIT: PROPER SOLUTION

See: http://www.w3schools.com/css/pr_print_pagebi.asp
So if you add the following to your CSS it should fix your problem:

@media print
{
    div.pad { page-break-inside:avoid; }
}

All the major desktop browsers now support this.

However, there is also page-break-after:avoid and page-break-before:avoid which you can add to every element within the .pad class in order to produce the same result in some older versions of browsers.

@media print
{
    div.pad * { 
        page-break-after:avoid;
        page-break-before:avoid;
    }
}

http://www.w3schools.com/Css/pr_print_pagebb.asp

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

OLD ANSWER:

It sounds like you're trying to fit something on a page that doesn't fit on a page. I would try adding a stylesheet with media="print"...

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />

...that reduces the font size, padding, etc. of all of these elements so that you CAN put a page break before this section and have it fit on the page.

CSS3 Page break for printing not breaking at random spots

What you're looking for is "SECTION > H2:last-of-type", not "H2:last-child", because the OL after the H2 is the last child of their parent.

How to only show certain parts with CSS for Print?

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

how can we prevent a block from being printed across different pages

There is no good general solution. As some have pointed out, you can put a page break before <div> "B" ... but there you will always get it. Even when "A" and "B" all fit on one page.

You can use page-break-inside="avoid" on <div> "B". This is probably closer to what you want. If "B" does not fit on the page with "A", "B" will all be moved to the next page.

BUT ... that has a side effect because there is a third possibility. What if the content of "B" is so large that it itself does not fit on a page? WHat will happen is that it would do what you think, moving "B" to the next page and try to build that page with "B". It will not be able to meet the condition that "B" avoid a page break inside so it will break that condition. Unfortunately, it would not figure that out until the end of the page, so you will end up with a blank page.

If you know that "B" will always fit on one page, then you can use page-break-inside="avoid" and that would work. But if it does not, nothing will work for you.

A slightly more lengthy explanation for a similar question is here:

HTML/CSS: empty page + only header page when printing table

So what you actually want is three things in one... (1) you would like it avoid a page-break inside as long as it is not longer than a page, otherwise, (2) you want a page break before (3) unless it fits on the current page. Unfortunately, this does not exist. You could only do that with Javascript. You could set the width for the page for the div's and then get the height of div "A" and div "B" and then make a decision to dynamically insert those CSS properties as part of the print process.

Print styles: How to ensure image doesn't span a page break

The only means I can think of is to use one (or potentially more) of the following css rules:

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

I half-recall that these declarations only apply to block-level elements (so you'd also have to define display: block; on your image, or use some kind of wrapping container and apply the rules to that (whether it's in a paragraph, div, span, list, etc...).

Some useful discussion here: "What are most usefule media="print" specific, cross-browser compatible CSS properties?"

References:

• page-break-after.
• page-break-before.
• page-break-inside.

How to deal with page breaks when printing a large HTML table

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

---

Related Topics