1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: page-break-inside: paged media</title>
5 <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-break-props">
8 <meta name="assert" content="The 'page-break-inside' property applies to paged media only.">
9 <style type="text/css">
10 @page {margin: 7%;}
11 html, body {
12 height: 100%;
13 line-height: 1;
14 font-size: 16px;
15 }
16 * {
17 margin: 0;
18 padding: 0;
19 }
20 div {
21 height: 100%;
22 }
23 #pusher {
24 height: 100%;
25 margin-bottom: -2em;
26 }
27 #test {
28 page-break-inside: avoid;
29 font-weight: bold;
30 color: blue;
31 }
32 </style>
33 </head>
34 <body>
35 <div>
36 <p id="pusher">On screen, only 'Line C' below this sentence must be hidden until you scroll, but, when paginated, all three lines should appear together on the second page.</p>
37 <div id="test">
38 <p>Line A</p>
39 <p>Line B</p>
40 <p>Line C</p>
41 </div>
42 </div>
43 </body>
44 </html>