CSS 인쇄:페이지 간의 절반씩 잘라내는 DIV를 피합니까?

CSS 인쇄:페이지 간의 절반씩 잘라내는 DIV를 피합니까?

저는 대량의 아이템 모음을 가져다가 WebView in Cocoa(웹킷을 렌더러로 사용하므로 기본적으로 이 HTML 파일이 Safari에서 열린다고 가정할 수 있음)의 HTML에 넣는 소프트웨어에 대한 플러그인을 작성하고 있습니다.

그것이 만드는 DIV는 역동적인 높이를 가지고 있지만 크게 달라지지는 않습니다.보통 200px 정도 됩니다.어쨌든 문서 한 장당 약 600개의 항목을 인쇄하는 데 어려움을 겪고 있습니다.운이 따르지 않는 한, 모든 페이지의 맨 아래와 맨 위에 반으로 잘린 항목이 있습니다. 그래서 실제로 인쇄물을 사용하는 것은 매우 어렵습니다.

페이지 브레이크 전, 페이지 브레이크 후, 페이지 브레이크 내부, 세 가지 조합을 시도해 보았지만 소용이 없었습니다.웹킷이 설명서를 제대로 렌더링하지 못했거나 사용법에 대한 제 이해가 부족한 것 같습니다.어쨌든 저는 도움이 필요합니다.인쇄할 때 DIV가 절반으로 잘리는 것을 방지하려면 어떻게 해야 합니까?

침입자를 사용하면 다음과 같이 작동합니다.

@media print {
  div {
    break-inside: avoid;
  }
}

모든 주요 브라우저에서 작동합니다.

• 크롬 50+
• 테두리 12+
• 파이어폭스 65+
• 오페라 37+
• 사파리 10+

으로.page-break-inside: avoid;대신에 역시 일을 해야 하지만, 정확히 에 의해 감가상각되었습니다.break-inside: avoid.

page-break-inside: avoid;wkhtmltopdf를 사용하는 데 어려움을 겪었습니다.

텍스트에 공백이 생기지 않도록 하려면 추가display: table;텍스트가 포함된 디바의 CSS로.

이것이 당신에게도 효과가 있기를 바랍니다.고마워요 존 S.

편집: 다음에 추가할 것을 제안합니다.media기존 스타일을 깨지 않으려면 블럭을 선택합니다.

@media print {
  div.my-div {
    display: table
  }
}

부분적인 해결책만:IE에서 이 작업을 수행할 수 있는 유일한 방법은 각 디브를 자신의 테이블로 포장하고 테이블에 페이지 침입을 방지하는 것이었습니다.

page-break-inside: avoid;항상 작동하는 것 같지는 않습니다.컨테이너 요소의 높이와 위치를 고려한 것으로 보입니다.

예를들면,inline-block페이지보다 높은 요소는 잘립니다.

작업을 다시 시작할 수 있었습니다.page-break-inside: avoid;컨테이너 요소를 식별하여 기능성display: inline-block가:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

이것이 "페이지 침입이 통하지 않는다"고 불평하는 사람들에게 도움이 되기를 바랍니다.

페이지 깨짐-inside: 피하세요; 확실히 웹킷에서는 작동하지 않습니다. 사실 지금까지 5년 이상 알려진 문제였습니다. https://bugs.webkit.org/show_bug.cgi?id=5097

제가 조사한 바로는 이를 수행할 수 있는 알려진 방법이 없습니다. (저는 제 자신의 해킹을 파악하는 중입니다.)

FF에서 이러한 기능을 수행하려면 DIV(또는 컨테이너) 내부에서 깨지고 싶지 않은 내용을 오버플로우: auto로 포장하는 것이 좋습니다(컨테이너 크기를 너무 작게 조정하여 이상한 스크롤 바가 나타나지 않도록 주의하십시오).

안타깝게도, FF는 제가 이것을 해낼 수 있었던 유일한 브라우저이고, 웹킷은 제가 더 걱정하는 것입니다.

제 경우에는 선택한 div를 page-break-inside:회피로 설정하고 모든 요소를 표시:inline으로 설정하여 웹킷의 페이지 브레이크 문제를 해결할 수 있었습니다.이렇게.

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

페이지 구분 속성은 인라인 요소(웹킷 내)에만 적용할 수 있는 것 같습니다.필요한 특정 요소에만 디스플레이(inline)를 적용하려고 했지만 작동하지 않았습니다.모든 요소에 인라인으로 적용하는 것이 유일하게 효과가 있었습니다.내 생각엔 큰 컨테이너 디브 중 하나가 일을 망쳐놓고 있는 것 같아요.

누군가가 이 문제를 확대할 수도 있습니다.

저도 wkhtmltopdf를 처리해야 했습니다.

저는 부트스트랩 3.3.7을 프레임워크로 사용하고 있으며 .row 요소의 페이지가 끊기는 것을 피해야 합니다.

다음 설정을 사용하여 작업을 수행했습니다.

.myContainer {
    display: grid;
    page-break-inside: avoid;
}

@media print로 포장할 필요 없음

페이지 구분 후에 사용할 수 있는 값은 다음과 같습니다.auto, always, avoid, left, right

절대적인 위치에 있는 요소에 페이지 구분 속성을 사용할 수는 없다고 생각합니다.

나는 같은 문제가 있지만 아직 해결책이 없습니다. 페이지 침입은 브라우저에서 작동하지 않고 오페라에서 작동합니다.다른 방법으로는 page-break-after: 회피를 사용할 수 있습니다. div의 모든 하위 요소가 함께 유지되도록... 하지만 테스트에서 회피 속성이 작동하지 않습니다. 예를 들어 Firefox에서는...

모든 인기 있는 브라우저에서 작동하는 것은 page-break after: always를 사용하는 강제 페이지 브레이크입니다.

내가 우연히 만난 한 함정은 '오버플로우' 속성이 '자동'으로 설정된 상위 요소였습니다.이것은 인쇄 버전에서 페이지 브레이크 인사이드 속성을 가진 하위 디바 요소를 무효화합니다.그렇지않으면,page-break-inside: avoidChrome에서도 잘 작동합니다.

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

이 솔루션은 모든 새로운 브라우저에 적용됩니다.caniuse.com/ 참조 #검색=페이지 구분-

부트스트랩을 사용하다가 문제가 생겨 각 행에 여러 개의 열이 있었습니다.

주려는 중이었습니다.page-break-inside: avoid;아니면break-inside: avoid;에게col-md-6디브 요소그게 안 됐어요.

위에 DOK가 제시한 답변에서 floating elements가 잘 작동하지 않는다는 힌트를 얻었습니다.page-break-inside: avoid;.

그 대신에, 나는 줄 수 밖에 없었습니다.page-break-inside: avoid;아니면break-inside: avoid;에게<div class="row">요소.그리고 인쇄 페이지에 여러 줄이 있었습니다.

즉, 각 행에는 두 개의 열만 있습니다.그리고 항상 수평으로 들어맞으며 새로운 라인으로 감싸지 않습니다.

다른 예제에서는 각 행에 4개의 열을 원할 경우col-md-3.

언급URL : https://stackoverflow.com/questions/907680/css-printing-avoiding-cut-in-half-divs-between-pages