CSS로 원하는대로 페이지 나누기를 할 수 없습니다.

오히려 간단한 html 구조라고 생각되는 스타일 시트를 만들려고합니다. 그러나 원하는 것을 얻을 수 없습니다.CSS로 원하는대로 페이지 나누기를 할 수 없습니다.

가

그것은 챕터 (: .chapter 클래스)의 conssists 다음과 같이

되는 HTML의 구조이다.

각 장의 제목은 (클래스 : .chapter-title)입니다.

이 장은 의 항목 (클래스 : .item)으로 구성되어 있습니다.

항목은 문단 (클래스 : .paragraph)으로 구성됩니다. 문서가 인쇄 될 때

, 나는 .chapter-title과 첫.item 사이에 페이지 나누기를 원하는없고, 나는 .item 내에 페이지 나누기를 원하는 없습니다. .item 사이의 페이지 나누기가 괜찮습니다.

이 내가 시도 것입니다 :

<!DOCTYPE html> 
<html> 
<head><!--{--> 

    <title>Chapter, items and paragraphs</title> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <!--{--><style type='text/css'> 

    body { 
     font-family:Garamond; 
    } 

    .chapter { 
     page-break-inside:avoid; 
    } 

    .chapter-title + .item { 
     page-break-before:avoid; 
    } 

    .chapter-title { 
     font-size: 30px; 
     page-break-after:avoid; 
    } 

    .item { 
     border: 1px dashed #ccc; 
     page-break-inside:avoid; 
    } 

    .paragraph { 
     height:5cm; 
     border: 1px solid #7cf; 
     margin:0.1cm; 
    } 

    </style><!--}--> 

</head><!--}--> 
<body><!--{--> 

<div class='chapter'> 
     <div class='chapter-title'>Chapter 1</div> 

     <div class='item'> 
     <div class='paragraph'>1/1/Para 1</div> 
     </div> 

     <div class='item'> 
     <div class='paragraph'>1/2/Para 1</div> 
     <div class='paragraph'>1/2/Para 2</div> 
     </div> 

</div> 

<div class='chapter'> 
     <div class='chapter-title'>Chapter 2</div> 

     <div class='item'> 
     <div class='paragraph'>2/1/Para 1</div> 
     <div class='paragraph'>2/1/Para 2</div> 
     </div> 

     <div class='item'> 
     <div class='paragraph'>2/2/Para 1</div> 
     </div> 

</div> 

<div class='chapter'> 
     <div class='chapter-title'>Chapter 3</div> 

     <div class='item'> 
     <div class='paragraph'>3/1/Para 1</div> 
     <div class='paragraph'>3/1/Para 2</div> 
     </div> 

     <div class='item'> 
     <div class='paragraph'>3/2/Para 1</div> 
     </div> 

     <div class='item'> 
     <div class='paragraph'>3/3/Para 1</div> 
     <div class='paragraph'>3/3/Para 2</div> 
     <div class='paragraph'>3/3/Para 3</div> 
     </div> 

     <div class='item'> 
     <div class='paragraph'>3/4/Para 1</div> 
     <div class='paragraph'>3/4/Para 2</div> 
     </div> 

</div> 


</body><!--}--> 
</html>

(크롬, 페이지 크기 A4) 나는 페이지 나누기가 인쇄 된 경우 3 장 사이의 첫 요소. 위의 몇 가지 변형을 시도했지만 이것이 내가 필요한 것에 가장 가깝습니다. 그래서, 내가 원하는 것을 이루기위한 스타일 시트가 있습니까?

.paragraph의 CSS height 속성은 인위적으로 문서 크기를 날려 버리는 데에만 사용됩니다. "실제"문서에는 다양한 높이의 .paragraph를 만드는 더 많은 텍스트가 있습니다.

편집 잘못 요소항목로 변경.

출처

2013-09-05 René Nyffenegger