CSS 인쇄 : 페이지 간 반감기 DIV 피하기?

Cocoa의 WebView (WebKit을 렌더러로 사용하므로)에서 많은 항목 모음을 가져와 HTML로 팝업하는 소프트웨어 조각에 대한 플러그인을 작성하고 있습니다. 원정 여행).

그것이 만드는 DIV는 동적 높이이지만 너무 많이 변하지는 않습니다. 보통 약 200px입니다. 어쨌든, 문서 당 약 6 백 개에 달하는이 항목들로 인해, 인쇄하는데 정말 힘든 시간을 보내고 있습니다. 운이 좋으면, 모든 페이지의 맨 위와 맨 아래에 반으로 잘린 항목이있어 실제로 출력물을 사용하기가 매우 어렵습니다.

페이지 나누기 전, 페이지 나누기 후, 페이지 나누기 내부 및 세 가지 조합을 사용해 보았습니다. WebKit이 지침을 올바르게 렌더링하지 못하거나 지침을 사용하는 방법에 대한 이해가 부족한 것 같습니다. 어쨌든 도움이 필요합니다. 인쇄 할 때 DIV가 반으로 잘리지 않도록하려면 어떻게해야합니까?

이것은 작동해야합니다 :

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

현재 브라우저 지원 (12-03-2014)에 유의하십시오 .

• 크롬-1.0 이상
• Firefox (Gecko)-19.0+
• 인터넷 익스플로러-8.0+
• 오페라-7.0+
• 사파리-1.3+ (312)

부분 솔루션 만 : IE 에서이 작업을 수행 할 수있는 유일한 방법은 각 div를 자체 테이블에 래핑하고 테이블에 페이지 나누기를 설정하여 피하는 것입니다.

page-break-inside: avoid; wkhtmltopdf 사용에 문제가있었습니다.

텍스트가 끊어지는 것을 피하려면 display: table; 텍스트가 포함 된 div의 CSS에 .

나는 이것이 당신에게도 효과가 있기를 바랍니다. 감사합니다 JohnS.

페이지 나누기 내부 : 피하십시오; 확실히 웹킷에서 작동하지 않습니다. 실제로 5 년 이상 알려진 문제입니다. https://bugs.webkit.org/show_bug.cgi?id=5097

내 연구가 진행되는 한, 이것을 달성하는 알려진 방법은 없습니다 (내 자신의 핵을 알아 내려고 노력하고 있습니다)

내가 당신에게 줄 수있는 조언은 FF 에서이 기능을 달성하기 위해, 당신이하지 않는 내용을 랩으로 넘기고 싶습니다. 컨테이너 크기를 너무 작게 표시합니다).

슬프게도, FF는 내가 이것을 달성 할 수있는 유일한 브라우저이며, 웹킷은 내가 더 걱정하는 브라우저입니다.

페이지 구분 후 가능한 값은 다음과 같습니다. auto, always, avoid, left, right

나는 당신이 절대적으로 배치 된 요소에 페이지 구분 속성을 사용할 수 없다고 생각합니다.

나는 해결책이없는 동일한 문제가 있습니다. page-break-inside 는 브라우저가 아니라 Opera에서 작동합니다. 대안은 페이지 구분 후 를 사용하는 것입니다. 피하십시오;div의 모든 자식 요소에서 togehter ...를 유지하지만 내 테스트에서 avoid-Attribute가 작동하지 않습니다. Firefox에서 ...

모든 ppular 브라우저에서 작동하는 것은 예를 들어 페이지를 강제로 중단하는 것입니다. 페이지 구분 : 항상

내가 겪었던 한 가지 함정은 'overflow'속성이 'auto'로 설정된 부모 요소였습니다. 이것은 인쇄 버전에서 page-break-inside 속성을 가진 하위 div 요소를 무효화합니다. 그렇지 않으면 page-break-inside: avoidChrome에서 제대로 작동합니다.

필자의 경우 선택한 div를 page-break-inside : avoid로 설정하고 모든 요소를 ​​display : inline으로 설정하여 웹킷에서 페이지 나누기 문제를 해결했습니다. 이렇게 이렇게 :

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

}

page-break-properties는 인라인 요소 (웹킷)에만 적용 할 수있는 것 같습니다. 필요한 특정 요소에만 display : inline을 적용하려고 시도했지만 작동하지 않았습니다. 효과가 있었던 유일한 것은 모든 요소에 인라인을 적용하는 것입니다. 나는 그것이 엉망인 큰 컨테이너 사업부 중 하나라고 생각합니다.

누군가가 이것을 확장 할 수 있습니다.

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

모든 새 브라우저에서이 솔루션이 작동합니다. caniuse.com/#search=page-break-inside를 참조하십시오

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; }
}

이것이 "페이지 나누기 내부가 작동하지 않는다"고 불평하는 사람들에게 도움이되기를 바랍니다.