[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은 이전 블록 요소에 대한 명시적인 높이없이 페이지 나누기 설정을 인식 할 수 없습니다.
답변
이와 비슷한 문제가 있었지만 결국 해결책을 찾았습니다. 나는 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;
}
}