HTML 인쇄시 페이지를 강제로 끊을 수 있습니까?

HTML 인쇄시 페이지를 강제로 끊을 수 있습니까?

---

인쇄 가능한 HTML 보고서를 만들고 있는데 새 페이지에서 시작해야하는 "섹션"이 있습니다.

HTML / CSS에 무언가를 넣을 수있는 방법이 있습니까? 브라우저에게 그 시점에서 페이지를 강제로 끊어야한다고 (새 페이지를 시작해야 함) 알립니다.

나는 모든 브라우저에서 작동하기 위해 이것을 필요로하지 않는다. 나는 이것을 인쇄하기 위해 사람들에게 특정 브라우저 세트를 사용하도록 지시 할 수 있다고 생각한다.

---

"pagebreak"(또는 "pb")라는 CSS 클래스를 다음과 같이 추가하십시오.

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

그런 다음 페이지 나누기를 원하는 빈 DIV 태그 ( 또는 상자를 생성하는 모든 블록 요소)를 추가 하십시오.

<div class="pagebreak"> </div>

페이지에는 표시되지 않지만 인쇄시 페이지가 분할됩니다.

추신 : 이것은 아마도 사용할 때 -after(그리고 <div>페이지의 다른 것들과 함께 할 수있는 것) 에만 적용 되지만 CSS 클래스를 다음과 같이 보강해야한다는 것을 알았습니다.

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

---

이 링크를 사용해보십시오

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

---

CSS 속성 page-break-before(또는 page-break-after)을 사용할 수 있습니다 . 그냥 설정 page-break-before: always하는 블록 수준 요소 (예를 들어, 제목에 div, p또는 table새로운 행에서 시작해야 요소).

예를 들어, 2 단계 제목 앞과 클래스의 요소 newpage(예 : <div class=newpage>...) 앞에 줄 바꿈을 하려면 다음을 사용합니다.

h2, .newpage { page-break-before: always }

---

그냥 업데이트하고 싶었습니다. page-break-after지금은 유산입니다.

공식 페이지 상태

이 속성은 break-after 속성 으로 대체되었습니다 .

---

다음과 같은 기사가있는 블로그가 있다고 가정 해 보겠습니다.

<div class="article"> ... </div>

CSS에 이것을 추가하면 나를 위해 일했습니다.

@media print {
  .article { page-break-after: always; }
}

(Chrome 69 및 Firefox 62에서 테스트 및 작동).

참고:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; 중요한 참고 사항 : 여기에서 말 This property has been replaced by the break-after property.했지만와 함께 작동하지 않았습니다 break-after. 또한 MDN 문서는 break-after페이지 나누기에 특정하지 않은 것 같아서 (working)을 유지하는 것을 선호합니다 page-break-after: always;.

---

다음 페이지로 가려면 페이지를 추가해야합니다 ( "페이지 1"텍스트는 1 페이지에 있고 "페이지 2"텍스트는 두 번째 페이지에 있습니다).

Page 1
<div style='page-break-after:always'></div>
Page 2

---

@Chris Doggett makes perfect sense. Although, I found one funny trick on lvsys.com, and it actually works on firefox and chrome. Just put this comment anywhere you want the page-break to be inserted. You can also replace the <p> tag with any block element.

<p><!-- pagebreak --></p>

참고URL : https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing