답변:
Chrome을 포함한 모든 주요 브라우저에서 다음 접근 방식을 성공적으로 사용했습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>이것은 단순화 된 예입니다. 실제 코드에서 각 페이지 div에는 더 많은 요소가 포함됩니다.
position: relative.
break-after및 break-before에만 적용 block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - 수단이없고 수레 또는 공상 위치 트릭.
실제로 (Phil Ross에서) 수락 된 것으로 선택된 답변에서 하나의 세부 사항이 누락되었습니다 ....
그것은 합니까 크롬에서 일을하고, 해결책은 정말 바보 !
페이지 구분을 제어하려는 부모와 요소는 모두 다음과 같이 선언되어야합니다.
position: relative이 바이올린을 확인하십시오 : http://jsfiddle.net/petersphilo/QCvA5/5/show/
다음의 경우에 해당됩니다.
page-break-before
page-break-after
page-break-inside그러나 Safari에서 페이지 나누기 내부 제어가 작동하지 않습니다 (최소한 5.1.7에서).
이게 도움이 되길 바란다!!!
추신 : 아래의 질문은 최신 버전의 Chrome이 더 이상이를 존중하지 않는다는 사실을 제기했습니다. 장난. 그러나 그들은 다음을 존중하는 것 같습니다.
-webkit-region-break-inside: avoid;이 바이올린 참조 : http://jsfiddle.net/petersphilo/QCvA5/23/show
그래서 지금 추가해야 할 것 같아요 ...
도움이 되었기를 바랍니다!
<h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
Chrome은 플로팅 된 div의 page-break- * css 설정도 무시한다는 점에 유의하고 싶었습니다.
나는 CSS 사양 어딘가에 이것에 대한 타당한 정당성이 있다고 생각하지만 언젠가 누군가에게 도움이 될 것이라고 생각했습니다 ;-)
또 다른 참고 사항 : IE7은 이전 블록 요소에 대한 명시적인 높이없이 페이지 나누기 설정을 인식 할 수 없습니다.
이와 비슷한 문제가 있었지만 결국 해결책을 찾았습니다. 나는 overflow-x : 숨김; <html> 태그에 적용되었으므로 DOM에서 아래에서 무엇을하든 페이지 나누기를 허용하지 않습니다. overflow-x 로 되 돌리면 : visible; 잘 작동했습니다.
바라건대 이것은 누군가를 도울 것입니다.
* { overflow-x: visible }.
이 문제를 직접 겪고 있습니다. 내 페이지 나누기는 Chrome을 제외한 모든 브라우저에서 작동하며 테이블 셀 내부에있는 페이지 나누기 이후 요소로 격리 할 수있었습니다. (CMS의 이전, 상속 된 템플릿)
분명히 Chrome은 테이블 셀 내부의 page-break-before 또는 page-break-after 속성을 존중하지 않으므로이 수정 된 버전의 Phil 예제에서는 동일한 페이지에 두 번째 및 세 번째 헤드 라인을 넣습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>CSS 사양을 고려할 때 Chrome의 구현은 (의심스럽게도) 허용됩니다. 자세한 내용은 http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=ko에서 확인할 수 있습니다.
CSS주의 : display:inline-block인쇄 할 때.
내 테이블이 스타일이있는 div 내부에 있으면 다음 페이지로 이동할 CCS 속성이 Chrome 및 Firefox에서 작동하지 않습니다. display:inline-block
예를 들어 다음은 작동하지 않습니다.
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>그러나 다음 작업 :
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>display: flex
내가 아는 한 Google 크롬을 사용하여 테이블에서 올바른 페이지 나누기를 얻는 유일한 방법은 요소 <tr>에 속성 display : inline-table (또는 display : inline-block하지만 테이블이 아닌 다른 경우에 더 적합 함)을 제공하는 것입니다. ). 또한 "page-break-after : always; page-break-inside : avoid;"속성을 사용해야합니다. @Phil Ross 작성
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>