[css] Google 크롬 인쇄 페이지 나누기

페이지 나누기를 할 수 있도록 Google 크롬을 얻으려고합니다.

나는 page-break-after: always;크롬에서 유효한 많은 웹 사이트를 통해 들었지만 아주 간단한 예제로도 작동하지 않는 것 같습니다. 크롬으로 인쇄 할 때 강제로 페이지를 나누는 방법이 있습니까?



답변

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에는 더 많은 요소가 포함됩니다.


답변

실제로 (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

그래서 지금 추가해야 할 것 같아요 …

도움이 되었기를 바랍니다!


답변

Chrome은 플로팅 된 div의 page-break- * css 설정도 무시한다는 점에 유의하고 싶었습니다.

나는 CSS 사양 어딘가에 이것에 대한 타당한 정당성이 있다고 생각하지만 언젠가 누군가에게 도움이 될 것이라고 생각했습니다 😉

또 다른 참고 사항 : IE7은 이전 블록 요소에 대한 명시적인 높이없이 페이지 나누기 설정을 인식 할 수 없습니다.

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/


답변

이와 비슷한 문제가 있었지만 결국 해결책을 찾았습니다. 나는 overflow-x : 숨김; <html> 태그에 적용되었으므로 DOM에서 아래에서 무엇을하든 페이지 나누기를 허용하지 않습니다. 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>


답변

나는 전에 크롬 에서이 문제에 직면했고 그 원인은 div가 최소 높이를 값으로 설정했기 때문입니다. 해결책은 다음과 같이 인쇄하는 동안 최소 높이를 재설정하는 것이 었습니다.

@media print {
    .wizard-content{
        min-height: 0;
    }
}