페이지 분할 내부: 기능하지 않음

페이지 분할 내부: 기능하지 않음

내 (Wordpress) 사이트용 인쇄 스타일시트가 있는데 여러 페이지로 분할되지 않고 한 페이지로 이미지를 인쇄하고 싶습니다.경우에 따라서는, 텍스트의 행이 페이지간에 분할되어 있는 경우도 있습니다.포함시켰습니다.img {page-break: avoid;)내 인쇄 스타일시트에 써놨지만, 운이 없었어.이전 답을 찾긴 했지만 좀 오래된 것 같아요.

적당한 크기의 이미지를 여러 페이지에 걸쳐 인쇄하지 않고 한 페이지에 인쇄할 수 있는 신뢰할 수 있는 방법이 있습니까?텍스트 행이 페이지 간에 구분되는 이유는 무엇입니까?

사이트: http://74.220.217.211/주택개발/기프트온타운홈/

관련 투고:

• 인쇄 스타일:이미지가 페이지 구분을 넘지 않도록 하는 방법

• 가장 유용한 매체="인쇄" 사양, 크로스 브라우저 호환 CSS 속성은 무엇입니까?

• 페이지 분할을 피하기 위해 CSS를 수행하는 올바른 방법은 무엇입니까?

• Chrome에서는 페이지 나누기가 작동하지 않습니까?
• 페이지 분할 내부 회피책: 회피

img 요소의 부모 요소에는 다음과 같은 스타일이 있을 수 있습니다.

display: flex

그럼 내부 침입이 안 되겠네요

예를 들어 상위 요소 표시 스타일을 다음과 같이 변경하는 경우:

display: block

그럼 될 거야.

브라우저에 따라서는 이상한 제한이 있다page-break-inside: avoid. 여러 기사에서 다음과 같은 제한 사항이 제시되었습니다.

• 문서 트리에 상위 또는 조부모가 있는 경우display:flex또는display:grid페이지 리셋을 회피하는 것은 기능하지 않습니다.
• 부모 요소에 다음 값이 있는 경우display:inline-block,avoid동작하지 않습니다.
• 경우에 따라서는 부모 요소가position:relative값어치를 위해avoid(정확한 규칙은 알 수 없습니다)
• 경우에 따라서는 부모 요소와 요구의 중단을 피할 필요가 있는 요소 모두position:relative값어치를 위해avoid(정확한 규칙은 알 수 없습니다.
• 부모 요소에는 다음이 없어야 합니다.display: inline-block.
• 요소에는 다음 요소가 없어야 합니다.display:table-cell.

요컨대,@media print스타일은 아마 사용을 피해야 합니다.float,flex,grid,position:absolute그리고.position:sticky사용할 필요가 있는 경우page-break-inside: avoid다른 브라우저와의 최적의 호환성을 위해 루트부터 부모까지의 트리 전체를 정의해 보겠습니다.display:block깨져서는 안 되는 요소도display:inline-block에 더하여page-break-inside: avoid.

위의 예외는 사양의 일부가 아니기 때문에 브라우저 구현에서의 오류 또는 제한에 불과합니다.

또한 최신 사양이 더 선호됩니다.break-inside: avoid대신page-break-inside: avoid실제 브라우저의 지원은 여전히 매우 좋지 않습니다.둘 다 선언할 것을 권장합니다.

.nobreak
{
  page-break-inside: avoid;
  break-inside: avoid
}

는 아마 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★position않은 와 그 요소는 과 같이.페이지 끝에서 구분하지 않을 요소와 상위 요소는 다음과 같이 선언해야 합니다.

position: relative;

나머지 코드 스타일은 올바르고 다음과 같이 보여야 합니다.

@media print {
    img {
        page-break-before: auto;
        page-break-after: auto; 
        page-break-inside: avoid;
        position: relative;
    }
}

이것을 시험해 보세요.

.site-container, .site-inner (heck body tag possibly) {position:relative;}

p {
    page-break-inside: avoid;
    position: relative; 
}

이 FILED를 확인합니다.

인쇄 매체에 추가

Chrome에서 이것을 확인했을 뿐인데, 이것도 필요한 이미지에서 제외해도 괜찮아 보입니다.

img {
    page-break-before: auto;
    page-break-after: auto; 
    page-break-inside: avoid;
    display: block;
}

마지막으로 워드프레스는 이걸 가지고 있지만 실제로 도움이 될지...

 <!--nextpage-->

img {
    page-break-before: auto;
    page-break-after: auto; 
    page-break-inside: avoid;
    display: block;
}

이거면 될 것 같아

@media print를 사용하여 페이지 본문 요소의 적절한 높이를 설정하거나 이미지의 작은 크기를 설정합니다.

예를 들어 다음과 같습니다.

@media print{
body{
height: 800px;
}
}

언급URL : https://stackoverflow.com/questions/34534231/page-break-insideavoid-not-working