page-break-inside-006.xht (1222B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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="flags" content="paged" /> 9 <meta name="assert" content="The 'page-break-inside' property applies to paged media only."/> 10 <style type="text/css"> 11 @page {margin: 7%;} 12 html, body { 13 height: 100%; 14 line-height: 1; 15 font-size: 20px; 16 } 17 * { 18 margin: 0; 19 padding: 0; 20 } 21 div { 22 height: 100%; 23 } 24 #pusher { 25 height: 100%; 26 margin-bottom: -2em; 27 } 28 #test { 29 page-break-inside: avoid; 30 font-weight: bold; 31 color: blue; 32 } 33 </style> 34 </head> 35 <body> 36 <div> 37 <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> 38 <div id="test"> 39 <p>Line A</p> 40 <p>Line B</p> 41 <p>Line C</p> 42 </div> 43 </div> 44 </body> 45 </html>